Responsive Background-image WordPress
- SOLVED
I need to put a responsive background-image (logo-picture) top part of this page.
See screenshot,http://awesomescreenshot.com/04b4em2a68
Url to page, http://eggtapes.se/
See attached image that I´m going to use.
How is the best way to solve that?
Answers (4)
Sai kumar answers:
Hi,
You can try this in your website using inspect element.
Please add below code
#navContainer{
background: url(http://www.wpquestions.com/uploads/Rick_Wakeman_php0MOW2H.jpg) no-repeat center;
background-size: 100%;
}
Many Thanks
Sai
Reigel Gallarde answers:
you are already using css3. You can use background-size: 100%;
also, I can help you do it if that won't work. Let me know..
Rick Wakeman comments:
Thanx for your answer.. But how can I add a divcontainer that holds the background picture that dont break the header navigation..
Reigel Gallarde comments:
I can suggest a lot of choices, but honestly, your html/css code needs help.
We can just add the background to navContainer. but navContainer in my opinion is broken.
We need to re-do css first for the contents of navContainer. This way to avoid further problems.
I tried adopting to your current code, but there's a lot of steps other than just using background-image and background-size in order not to break the menus and show the background.
Bard answers:
Can you make another image that describing how you like to respond? when it changes the width.
Bard comments:
It seems you got another problem in menu item in your HTML structure, you will need first build another menu div for desktop view. And have this css for it:
background-image: url(images/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
The tricky is
background-size: cover;
not
background-size: 100%;
