Create Background Images on Home Page and Other pages

  • Resolved missbonniegene

    (@missbonniegene)


    7 years ago

    Hello!

    My client would like some background imagery on the website. They have requested different images for the landing page as well as the subsequent pages (connect, music, etc).

    I don’t want these to be featured images, as this looks ridiculous when added on top of already having a header image. Is there any way at all to add a background image and perhaps edit content to be transparent over the background?

    I would also be okay with a background image showing along the borders with a more narrow and opaque content area.

    Any and all help is greatly appreciated.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can do this, but I would recommend using a translucent colour behind the text instead of transparent to increase readability of the text.

    This will be a manual task and we can help you, but we just need to know how many pages you want to target and the URLs for those pages.

    Thread Starter missbonniegene

    (@missbonniegene)

    Hi Andrew!

    Thanks for the response. I actually did mean translucent, transparent was a typo on my part.

    Here are the 8 pages I would like to target:

    https://marsfallpodcast.com/

    https://marsfallpodcast.com/about/

    https://marsfallpodcast.com/about/marsfall-characters/

    https://marsfallpodcast.com/about/behind-the-scenes/

    https://marsfallpodcast.com/about/amity-bros/

    https://marsfallpodcast.com/music/

    https://marsfallpodcast.com/press/

    https://marsfallpodcast.com/connect/

    There are several photos they would like as backgrounds to the pages. This shouldn’t be a problem, correct? There will also be a page created in the next week or so. I don’t have the information for it yet, but they will want a photo behind there.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You will need to set up a Child Theme first so that you have a place to put the images: https://codex.www.ads-software.com/Child_Themes

    Once you’ve set it up, create an ‘images’ folder inside it and then put your several images in there.

    Let me know when that’s done.

    Thread Starter missbonniegene

    (@missbonniegene)

    Sorry for the delay Andrew,

    It’s done!

    Thread Starter missbonniegene

    (@missbonniegene)

    Andrew,

    Just checking in to see if we can move forward with this?

    Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh sorry I think I forgot this.

    The method we’ll be taking is looking at the <body class="... code and finding the unique class applied to each page. This can be seen in the source code (from right click on your page).

    Then using that class in CSS to apply the background, for instance:

    
/* Homepage - add background image */
body.home.colors-dark, 
.home.colors-dark .site-content-contain, 
.home.colors-dark .navigation-top, 
.home.colors-dark .main-navigation ul {
    background-color: transparent;
    background-image: url('path-to-image.png');
    background-repeat: no-repeat;
}

/* Homepage - add translucent background to content */ 
.home .site-content {
    background: rgba(0, 0, 0, 0.4);
}

    Does that help? Unfortunately I won’t have time to show you the code for all 8 examples.

    Thread Starter missbonniegene

    (@missbonniegene)

    Okay,

    So I right click on my website, I select “view page source”.

    I’m not a coder, so I really don’t want to mess this up. Is the code example you provided something I’m supposed to be looking for in the code? Or is that something you want me to paste into the code. Do I have to use my child theme to access each photo? If so, how do I do this. If not, what do I do to access the image code?

    Once I have the new code, what do I do with it? Do I put it in my child theme or my parent theme?

    I’m sure I can figure it out for all of them if I can just understand one of them, I’m just entirely inexperienced in this.

    Thread Starter missbonniegene

    (@missbonniegene)

    On my homepage, for example. I found this line of code:

    <body class=”home blog logged-in admin-bar no-customize-support hfeed has-header-image has-sidebar colors-dark”>

    What part of this do I utilize as the class? And how do I combine it with the code you gave to work in the CSS editor?

    If you are able to give me an example of the final coding needed to go in CSS editor and explain what the class is exactly, and where I’m drawing this image code from, I should be good.

    Sorry to bother you so much!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So with the homepage, the class unique to the page is “home”:
    <body class=”home …”>

    I’ve given you the code for the Homepage, so let’s look at another page. The ‘about’ page.

    With the about page and probably all other pages, the unique class will be something like “page-id-(n)”.

    If you go to the About page: https://marsfallpodcast.com/about/
    View source;
    You’ll see amongst the classes in the <body element is the class “page-id-9”:

    <body class=”… page-id-9 …”>

    What you need to do is duplicate the CSS and this time use “.page-id-9” instead of “.home”. So you end up with something like this:

    

/* Homepage - add background image */
body.home.colors-dark, 
.home.colors-dark .site-content-contain, 
.home.colors-dark .navigation-top, 
.home.colors-dark .main-navigation ul {
    background-color: transparent;
    background-image: url('path-to-image.png');
    background-repeat: no-repeat;
}

/* Homepage - add translucent background to content */ 
.home .site-content {
    background: rgba(0, 0, 0, 0.4);
}

/* About page - add background image */
body.page-id-9.colors-dark, 
.page-id-9.colors-dark .site-content-contain, 
.page-id-9.colors-dark .navigation-top, 
.page-id-9.colors-dark .main-navigation ul {
    background-color: transparent;
    background-image: url('path-to-image.png');
    background-repeat: no-repeat;
}

/* About page - add translucent background to content */ 
.page-id-9 .site-content {
    background: rgba(0, 0, 0, 0.4);
}
    • This reply was modified 6 years, 12 months ago by Andrew Nevins.
    Thread Starter missbonniegene

    (@missbonniegene)

    Okay. And then I just add each of these codes to the CSS editor, one after another?

    Thread Starter missbonniegene

    (@missbonniegene)

    Okay. And then I just add each of these codes to the CSS editor, one after another? Am I doing anything with the photos yet, or is that the next step?

    Thread Starter missbonniegene

    (@missbonniegene)

    I’m just trying to figure out now how to find the image code. Do I look somewhere specific in my child theme?

    Thread Starter missbonniegene

    (@missbonniegene)

    I experimented by pulling the png from my media file (not child theme) just to see. it did show on the home page the way I wanted it to, but I have a few modification questions.

    When I looked at it, it was a little too translucent. Is there a way to make it fuzzed out a little more in the background for readability?

    And being that my homepage is so long, is there a way to get the image to stick so that the text keeps scrolling over it? When I tried putting it in the image travels up with the text and then my header content repeats itself below the added image, which looks bad. I took the code out for the time because it looked ugly.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    When I looked at it, it was a little too translucent. Is there a way to make it fuzzed out a little more in the background for readability?

    I don’t think so with CSS, but you can make your background image fuzzier in an image editing tool.

    I’m just trying to figure out now how to find the image code. Do I look somewhere specific in my child theme?

    What do you mean by new image code? If you mean this bit:

    
    background-image: url('path-to-image.png');

    Then you’re supposed to point to the image inside its destination. If you put the image inside the Child Theme folder then the path will be:

    
    background-image: url('image.file-extention');

    is there a way to get the image to stick so that the text keeps scrolling over it?

    Maybe, below this line:

    
    background-repeat: no-repeat;

    Add this:

    
    background-attachment: fixed;

    It’s difficult to envisage the problems this will cause. If you are experiencing problems can you leave the issue up on your site to debug later?

    • This reply was modified 6 years, 12 months ago by Andrew Nevins.
    • This reply was modified 6 years, 12 months ago by Andrew Nevins.
    Thread Starter missbonniegene

    (@missbonniegene)

    Got it!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Create Background Images on Home Page and Other pages’ is closed to new replies.