scale background image & defining specific background images for different pages

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

  • 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.

    Thread Starter mlaurel

    (@mlaurel)

    @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?

    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 https://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.

    Thread Starter mlaurel

    (@mlaurel)

    My, bad…&

    Thank you! ??

    will give it a go

    Thread Starter mlaurel

    (@mlaurel)

    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

    @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.

    Thread Starter mlaurel

    (@mlaurel)

    @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…

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘scale background image & defining specific background images for different pages’ is closed to new replies.