Tagged: header background image
-
AuthorPosts
-
October 7, 2018 at 9:04 am #1018623
Hello,
I hope you can help me out.
I tried to setup custom BG image to be displayed on all pages and post also.Now I have created the BG image to the header : Enfold Theme Options “generel styling” and it look okay on my laptop, but I have to select the image to repeat? If not I have white border left and right.??
The image will no resize and show correctly on mobile, what changes do I need to add ?I hope someone can help me out.
I can not use the color-section function. If I do this the header are showed correctly, but on my blogger post, the expect text are not displayed anymore? also the comments and author credits are not showed anymore.
It would be great if you can help me using the color-section function to add the back-ground picture header.
October 9, 2018 at 5:07 am #1019311Hey sobemarketing,
Thank you for using Enfold.
That is how the background is supposed to resize on smaller screens. If you want it to be fully visible inside the header container, you can add the following css code but it may distort the image on certain screen sizes.
@media only screen and (max-width: 767px) { .header_color { background-size: 100% 100%; height: 130px; } }
// https://imgur.com/a/xn1SwH5
Best regards,
IsmaelOctober 9, 2018 at 12:31 pm #1019459Thank you it works now. excellent.
Final issues, the image dosent fill out whole screen when viewing from my laptop. There is a border left and right..?What code do I have to add to adjust this?
Thank you
October 9, 2018 at 7:35 pm #1019632Hi sobemarketing,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.header_color { background: #ffffff url(//abroadwithlotta.com/wp-content/uploads/2018/10/SUITCASECOVER.jpg) center center no-repeat scroll; background-size: cover; }
If you need further assistance please let us know.
Best regards,
VictoriaOctober 9, 2018 at 8:12 pm #1019654Hi Victoria
Thank you so much, that solved the issue.
One more thing, the text ‘Travel with a suitcase” are not displayed when looking the webpage on laptop or desktop…Do you have the CSS code for display some more of the picture?
Thank you
October 10, 2018 at 5:06 am #1019752Hi,
Thanks for the update. Please add this code above the previous one.
@media only screen and (max-width: 1360px) and (min-width: 989px) { .av-section-bottom-logo { background-size: 100% 100%; min-height: 400px; } }
Best regards,
IsmaelOctober 10, 2018 at 6:46 am #1019807Hi Ismael
Thank you so much. it worked!! :-)
October 10, 2018 at 10:03 am #1019850Hi,
Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardOctober 11, 2018 at 6:35 am #1020188Thank you, this should be all for now.
Appreciate the help :-)
October 11, 2018 at 6:19 pm #1020429Hi,
If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Custom Background Image Logo Area – Image not responsive on mobile’ is closed to new replies.