SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    Is there a way to scale an image with generated content

    Here's the test case, trying to scale a generated image to 100% of the parent. Impossible?
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
    #google:before{
      content: url("https://www.google.com.au/images/srpr/logo3w.png");
      position: absolute;
      width: 100%;
    }  
    </style>
    </head>
    <body>
    <div id="google"></div>
    </body>
    </html>

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,069
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Check the width and height of the body. My guess is that is your current limitation (expressing 100% width and height of body may make the image expand too)

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I don't think so. Your image is part of the CONTENT of your pseudo element, but your CSS targets the pseudo element itself. kinda a bummer, I know. However, if you don't mind using CSS3 you can make the pseudo element have a BG, and then use the background-size: property.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes as Ray said above you will need to use a background image instead and use background-size to stretch the image.


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
  •