SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Location
    Germany
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <html> Background-Image with 75% width?

    Hi,

    is it possible to set a background-image to just 75% width while adding it to the <html> tag without setting the whole page to 75%?
    Code:
    html {
    	background-image: url({vb:raw imageurl});
    	background-repeat: no-repeat;
            background-position:left;
    }
    Thanks a lot!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Unfortunately, background images don't scale like that ... well, not in CSS2, anyway. (They will do so in CSS3, but that's not widely supported yet.)

    There are, however, ways of doing such things with JavaScript. An example would be something like Supersized. It's a lot of code for a simple effect, but anyhow, it's possible. (Here is a version of it that just uses one background image rather than a slideshow.) I suppose you could set up your background image so the 25% of it (12.5% either side) is the plain background color of the site. Just a thought, anyhow.)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,386
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    CSS3 has background-size which allows for background images to be scaled with percentages etc. You can see browser support for the property here. Its supported only in ie9+.

    I would avoid applying background to the html element unless you know the consequences as that relegates the body background to content height only. It's best to use the body elements for backgrounds unless you really have no choice.

    Edit:


    Whoops ralph beat me to it

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2005
    Location
    Germany
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We actually try to put a background-image as kind of "ambient-image" into a vbulletin-forum. Depending on the subforum a specific background-image shows up, with a low opacity. As the <body> tag got border with padding around it we went ahead using the <html> tag.

    Thanks a lot guys, I will go for the CSS3 background-size attribute for now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •