Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Responsive Background-image WordPress


I need to put a responsive background-image (logo-picture) top part of this page.
See screenshot,

Url to page,

See attached image that I´m going to use.

How is the best way to solve that?

Answers (4)


Sai kumar answers:


You can try this in your website using inspect element.

Please add below code

background: url( no-repeat center;
background-size: 100%;

Many Thanks


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;
background-size: 100%;


Romel Apuya answers:

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