Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2015-02-13

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

2015-02-13

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.

2015-02-13

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%;

2015-02-13

Romel Apuya answers:

you can add a container for the header..
and make background-size:100%;