Header background image that is full width

  • Resolved melekka

    (@melekka)


    11 years, 6 months ago

    First of all thank you very much for all this work. All you people make me believe in humanity more.

    My problem. I´m trying to put an image as a header background that is full width. I´m using a child theme that is working. and I´m working locally
    I read previous threads and searched on the internet but maybe I´m a bit too stupid.

    I´m not using the theme option for this. I´m editing the CSS file like this:
    #header {
    background: url(“https://unsplash.imgix.net/uploads/14131528928453585b6dc/829d24cf?q=75&fm=jpg&s=eaf9f7f2b07eabc753b9ea3c7c65b2d7”);
    position: relative;
    padding-bottom: 60px; }

    and it is working well. but once I try to do it locally with an image located in the /img folder than it doens´t work.

    I do like this:

    #header {
    background: url(“img/header.png”);
    position: relative;
    padding-bottom: 60px; }

    Did I do something wrong? And thank you for your attention.
    peace

Viewing 6 replies - 1 through 6 (of 6 total)
  • bdbrown

    (@bdbrown)

    11 years, 6 months ago

    Hi melekka. Try removing the quotes from around the url.

    stephencottontail

    (@stephencottontail)

    11 years, 6 months ago

    Can you post a link to your site?

    bdbrown

    (@bdbrown)

    11 years, 6 months ago

    It’s not the quotes; sorry for the false lead there. Try putting a / in front of img, like url(“/img/header.png”)

    Thread Starter melekka

    (@melekka)

    11 years, 6 months ago

    Thank you for the answer guys.
    Stephen I´m working locally.

    Dear bdbrown I tried both your methods and it didn´t work.
    I tried so many different possibilities like: with and without quotes, changed the image, removed the /img, I also tried this url(“hueman/img/header.png”)
    but nothing worked.

    Could it be because I´m using a child theme?

    Thank you very much guys

    paulwpxp

    (@paulwp)

    11 years, 6 months ago

    FWIW, I tried this code via Firebug at theme’s demo page and it worked.

    #header {
	background: url("https://unsplash.imgix.net/uploads/14131528928453585b6dc/829d24cf?q=75&fm=jpg");
}

    Suggestion, download that image and host it in your site (upload it into your WP and get the url to use). Also, that image is very big both in dimension and in file size (file size is extremely big), so you have to optimize the jpg, and crop it to a proper size, so that users don’t have to waste too much bandwidth pulling up your page.

    Thread Starter melekka

    (@melekka)

    11 years, 6 months ago

    Thanks Paul for the reply and advice.

    I found the solution guys. I placed the image on the parent theme image folder. It was a stupid mistake.

    If you want to replace the header with a full width image you should do this:
    –First work always with a child theme. Otherwise your changes will get lost once there is a theme update. Read the documentation for further explanation.

    –Then create an image folder inside your child theme

    –Then add this code:
    #header {
    background: url(images/header.jpg);
    position: relative;
    padding-bottom: 60px;
    }

    -of course chose the correct name of your picture in background, and the positioning and padding is like salt and pepper, so according to your taste.

    Thank you people. Have a great day

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Header background image that is full width’ is closed to new replies.