10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

Image size 100 % - CSS HELP

by georgeweb13
8 replies
Hi!

I try to do this:

I have an element, and i want the background image to be all over the background.

e.g.
<div id="mydiv">
</div>

#mydiv{width:100%; height:100%;background:url(images/image1.jpg) no-repeat; background-size:cover;}

If i want, to do this:

<div id="mydiv">
<img src="images/image1.jpg">
</div>

#mydiv{width:100%; height:100%;}
#mydiv img{}

How can i make the same effect, with the image, to be cover all over the div????
But, without background-size:cover. Is it possible???
#100 #css #image #size
  • Profile picture of the author Lani
    Originally Posted by georgeweb13 View Post

    Hi!

    I try to do this:

    I have an element, and i want the background image to be all over the background.

    e.g.
    <div id="mydiv">
    </div>

    #mydiv{width:100%; height:100%;background:url(images/image1.jpg) no-repeat; background-size:cover;}

    If i want, to do this:

    <div id="mydiv">
    <img src="images/image1.jpg">
    </div>

    #mydiv{width:100%; height:100%;}
    #mydiv img{}

    How can i make the same effect, with the image, to be cover all over the div????
    But, without background-size:cover. Is it possible???
    Hey,

    Try this.

    <img src="images/image1.jpg" width="100%" height="100%" />

    You can also add class to this image and make sure it have width and height set to 100%.
    Signature
    Fastest Proxy Software! Get SOCKS 4/5 and Elite Proxies 100% Autopilot!
    {{ DiscussionBoard.errors[9512708].message }}
  • Profile picture of the author georgeweb13
    I want the image to be resize 100% at width and at height. To fill my screen, even if image will be cropped.
    With this solution, the image will be distorted. I dont want to be distorted.
    That's not the correct solution, but thanks anyway.
    {{ DiscussionBoard.errors[9520600].message }}
  • Profile picture of the author Ttrain
    georgeweb13, I made a jsFiddle for you to check out at : Edit fiddle - JSFiddle

    This code will force the image to fill the container, and if you add the "stretch" class to the image it will make it a bit bigger than the container while still keeping the aspect ratio. Hope that's what you're looking for.
    {{ DiscussionBoard.errors[9520893].message }}
  • Profile picture of the author georgeweb13
    Thanks Ttrain.
    I will check it ASAP.

    Thanks for your try and your help!
    {{ DiscussionBoard.errors[9534128].message }}
  • Profile picture of the author georgeweb13
    It worked somehow, but not as exactly as i wanted.
    I want to fill all the cover box. To be filled and to its height. Like background-size:cover
    {{ DiscussionBoard.errors[9534136].message }}
  • Profile picture of the author mralexanderca
    @OP I have created an HTML page for you to explain how to do this, there are several ways of achieving the same result but the basic idea is this:

    div.full-bg {
    width:100%;
    height:100%;
    position:absolute;
    }

    div.full-bg img {
    width:100%;
    height:100%;
    position:absolute;
    }

    You can see an example @ Background Image If you would like to share your html code for me to see it and perhaps reconstruct the code respectively, do so and i will look into it again.

    Mr Alexander
    Signature

    Mr Alexander

    Web Developer & Consultant with extensive experience, since 1998

    Websites.Consulting

    {{ DiscussionBoard.errors[9548258].message }}
  • Profile picture of the author georgeweb13
    Thanks for your help, but it didnt worked!
    :-(
    The image is disorted when i change the resolution.
    {{ DiscussionBoard.errors[9549637].message }}
    • Profile picture of the author mralexanderca
      If you provide me with the URL i can look into it in more details and determine the best course of action, its hard without knowing some details.

      Are you able to change the html or just the css?
      Signature

      Mr Alexander

      Web Developer & Consultant with extensive experience, since 1998

      Websites.Consulting

      {{ DiscussionBoard.errors[9550916].message }}

Trending Topics