Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: CSS images

  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Rio Rancho
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Angry CSS images

    So I want an image to be displayed at the top center of my website. This part is easy enough. The hard part is that I want it to resize it's width automatically to keep ten pixels away from the edge of the screen at all times. This way if someone's using a small screen it won't go way off into the distance, and if they're using a large screen it still stretches all the way.

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Just use a media query. Have the image set up as a certain size for large screens, and set it smaller for smaller screens.

    Code:
    .img {     
        background-image: url(img.jpg);
        width: 200px;
        margin: 0 auto;
    }
    
    @media only screen and (max-device-width: 480px) {
    
    .img {
        width: 100px;
    }}
    Thanks!

  • #3
    New Coder
    Join Date
    Jun 2013
    Location
    Rio Rancho
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much for your help, however, I'm still having some trouble: the image doesn't show up. Here's the code I have:

    .img {
    background-image: url(logo.png);
    width: 200px;
    margin: 0 auto;
    float: top center;
    }

    @media only screen and (max-device-width: 480px) {

    .img {
    width: 100px;
    }

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,226
    Thanks
    10
    Thanked 269 Times in 268 Posts
    Here's a version that works with CSS3's "box-sizing" property. It's the only non-JS way I could think of to do what you want, and it only works in new browsers. I'm not quite sure how the media query suggestion above is going to solve the problem.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Test</title>
    		<style type="text/css">
    			.img {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;padding:10px}
    		</style>
    	</head>
    	<body>
    	<img src="image.jpg" class="img">
    	</body>
    </html>

  • #5
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    I can't rememeber if it needs single quotes or not.

    Code:
    background-image: url('logo.png');
    You've got to set up your encoding in your html head tags to.

    Code:
    <meta charset='utf-8'>
    Thanks!

  • Users who have thanked stevenmw for this post:

    Cadethen (08-18-2013)

  • #6
    New Coder
    Join Date
    Jun 2013
    Location
    Rio Rancho
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks so much both of you!


  •  

    Tags for this Thread

    Posting Permissions

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