WordPress.org

Ready to get started?Download WordPress

Forums

scale background image & defining specific background images for different pages (8 posts)

  1. mlaurel
    Member
    Posted 2 years ago #

    Hello all,

    First off, thanks for taking the time to read this post...I've a few questions but I'll start with this 1 first.

    OK, I am modifying Twenty Eleven theme. This is what I would like my background image to look like & scale accordingly depending on screen/browser size. Image dimensions are 1920x1280.

    CSS:

    #dImgBg {position:fixed; width:100%; height:100%; overflow:hidden; z-index:0;}
    #bgImg {width:100%; height:100%;}

    HTML:

    <div id="dImgBg">
    	<img src="images/bgTmp.jpg" id="bgImg"/>
    </div>

    However, when using the Twenty Eleven theme, the result isn't quite the same.

    I've tried to "wrap" a div around #page but that was no good since that also includes the contents.

    So where can I add the code to scale just the background image?

    2nd question: How can I specify a background image per page?

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes.

  3. mlaurel
    Member
    Posted 2 years ago #

    @esmi, we had this discussion on a different post.

    It's not the Twenty Eleven theme itself, but a copy of it.

    I'm modifying a copy of Twenty Eleven, to get a better understanding of WP. The modified theme that I'm working on isn't on WP's server, I'm working on it locally & am uploading it to MY own server.

    So any ideas on how I can accomplish my original questions?

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    we had this discussion on a different post

    If you are using a child theme or a copy, please say so in each topic. We can deal with 100+ topics per day and we can't really be expected to remember who is using a child theme and who isn't.

    where can I add the code to scale just the background image

    In your stylesheet - which you should be using to load the background in the first place. Not in the markup.
    See http://www.w3schools.com/cssref/css3_pr_background-size.asp

    How can I specify a background image per page

    By using the classes generated on the <body> tag.

  5. mlaurel
    Member
    Posted 2 years ago #

    My, bad...&

    Thank you! :)

    will give it a go

  6. mlaurel
    Member
    Posted 2 years ago #

    Hello all,

    I'm in need of some help since I'm not getting what I would like to achieve with the background image properly.

    I'm editing a local copy of 2011 as it allows you to have customized backgrounds.

    However, using: Dashboard > Appearance > Background > Background Image; doesn't "stretch or shrink" the background image. Please note, this is not the effect I'm looking for.

    I would like to have the background "stretch / shrink" like this does.

    I was able to do this (2nd link) by using the following codes.

    CSS:

    #dImgbg { position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:0 ;}
    
    #bgImg { width:100%; height:100%;}

    HTML:

    <div id="dImgBg">
    	<img src="images/bgTmp.jpg" id="bgImg"/>
    </div>

    Just a sidenote, I did try esmi's suggestion;

    In your stylesheet - which you should be using to load the background in the first place. Not in the markup.

    but this doesn't stretch / shrink the image either.

    The problem I have, is that for some reason, when I add the CSS & HTML codes to style.css & header.php, respectively, the entire footer gets hidden "behind" <div id="dImgBg">.

    I've tried adding z-index: 20 to the elements in the =Footer but that didn't solve the problem.

    Please help, I'm stuck...

    Thank you

  7. insurgenesis
    Member
    Posted 1 year ago #

    @mlaurel, are you still hanging there or have you implemented something workable?

    Looked at your example via the links supplied.
    Why, if I may ask, do you want to stretch the bg?
    Surely you can just scale it (while retaining fixed aspect ratio) relative to view-port size.

    Anyway, I think esmi is right - limit yourself to css.
    What interests me more is that the default theme options might be too limited - BUT trying to find it in the css has been impossible.

  8. mlaurel
    Member
    Posted 1 year ago #

    @insurgenesis - I've since abandoned that...like you said trying to find it in the css was too much of a pain

    I did a completely different design without using any themes & just used WP as the 'backbone' for the site...

Topic Closed

This topic has been closed to new replies.

About this Topic