I tried solving the problem myself, but I can't do it.
Go to my site here:
http://digesale.com/
And scroll down to the footer. Just above the footer you will see an image. It's the one that says "Get Things Done, Start Buying," etc. That's the image I have a problem with...
On my browser/resolution it looks perfectly aligned, but a friend told me that on his resolution it doesn't cover the entire space left-to-right. If you press "Ctrl+-" on your keyboard you'll see the problem.
This is the code I use to put that image there:
<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350">
Can anyone help me make that image cover the whole width of that section so that it looks good even on smaller screen resolutions?
Thank you.
If you need to cover you can use the image as a background:
<div class="background"></div>
and in the css
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
The important part is background-size: cover because it fill the entire div in all cases.
EDIT
If you want another behaviour, you can use your old img tag
<img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img">
And the css
.responsive-img {
margin-bottom: -20px; /* this was writting in inline style. */
width: 100%;
height: auto;
}
Try the below CSS
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: contain;
width: 100%;
height: 26vw;
}
Related
I'm trying to make the image on my site to display 100% height but crop width as needed. On PC the site works as intented as can be seen below:
However when I check the site with my phone it displays the whole image distorting it.
HTML:
<header class="wide">
</header>
CSS:
body, html {
height: 100%;
}
.wide {
width: 100%;
height: 100%;
background-image: url('sebastian-unrau-42537-unsplash.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#media (max-width: 1199.98px) {
.wide {
background-attachment: scroll;
background-position: initial;
}
}
The media query is mandatory as the image doesn't work at all if the background-image is fixed and centered.
Now if I remove "background-size: cover":
It's kind of closer what I'm after but not quite. Am i missing something?
My PC is running Chrome 66.0.3359.117 and my phone 65.0.3325.109
Ok I figured it out by accident. I was using an image from Unsplash.com and the the original resolution is 6000x4000. As I was making a Codepen project to post here I resized the image and wondered why it worked on codepen but not on my pc. Well it seems the resolution needs to be about 5500x3667 or smaller to work.
Maybe there is a limitation I did not know of but anyway got it working now. I didn't change anything else.
You could use this property :
background-size: x% y%;
The first value is the horizontal position and the second value is the vertical.
So you can try :
background-size: auto 100%;
I have searched here, couldn't seem to find a solution. I know 'how' to essentially do mouseovers with jQuery if I use an actual "image" object, and have the image resized properly, I'm just trying to figure out if there is a way to do the same thing with CSS and use a specific class with background URL.
Here's my code & css:
.sample #img_id {
width: 80px;
height: 80px;
background: url('sample.gif') left no-repeat top;
}
.sample #img_id:hover {
width: 80px;
height: 80px;
background: url('sample-mouseover.gif') left no-repeat top;
}
and then my HTML code:
<div class="sample">
<div id=img_id></div>
</div>
Now - if the image is say 200 pixels by 200 pixels - the image does NOT resize. (I.e., it will 'overflow'). I was expecting the image to be resized to 80px x 80px.
I have also tried this:
.sample img {
width: 80px;
height: 80px;
background: url('sample.gif') left no-repeat top;
}
.sample img:hover {
width: 80px;
height: 80px;
background: url('sample-mouseover.gif') left no-repeat top;
}
and then my HTML code:
<div class="sample">
<img src=sample.gif>
</div>
But this doesn't work either. The 'initial' image is "resized" properly (i.e., to 80 x 80 px) - but with the mouseover, the image would be 200px x 200px (i.e., no resizing).
How do I get my sample image properly resized/scaled to fit within the 80x80px on a mousever via CSS? (Like I said, I figured it out via jQuery, I just figure there should be an easy solution with CSS, and not quite sure just how to get it resized properly).
Thanks!
The background-size property allows you to change the dimensions of the background image, unless you need it to work in IE8 and perhaps Opera Mini.
possibly syntax, it's working on this fiddle
I have made a full screen slide show on a web page I am making, but as a entry page after they are 'done' with the slide show..I want to put a picture on top with the width expanding to full size in width after the resolution to the user. While the height is gonna be static..like 600px.
Is there a way to do this? With CSS or something? I am new to CSS and after googling for many days I havent found any decent example of what I am trying to make
I do not have any example ready of what I am trying to archieve, but hopefully someone will have a idea of what I am trying to do.
Thanks in advance
You can set two different values in background-size:
.yourimg {
background-image: url('yourimghere.jpg');
background-size: 100% 600px;
}
You can try with a container like this
HTML:
<div id="boom">
plop
</div>
CSS:
#boom {
width: 100%;
height: 600px;
background: url(http://placehold.it/1600x600);
}
Result: http://jsfiddle.net/fx5jM/
This worked for me
.backgroundImage{
background-size:contain;
background-position:top center;
background-repeat: no-repeat;
height:600px;
}
I have this fiddle I'm playing with to crop and center an image. It works quite well, but I would need the wrapping div.test to have the same width of the image. This is not possible: if I set the width of the img to 300px the magic does not work. I think it's because of the span I use to center the image. I think it leaves a kind of space footprint (maybe the space between letters or words?).
So: how to make its space effects "invisibles"?
Update
My original purpose was: resize the image horizontally and crop-and-center vertically + compatibility from IE8 >. All done with CSS. The solution linked above is almost close to the solution, but not perfect (the little space on the left). That's why I asked for a fix on it.
I am not positive if I am understanding your dilemma, however, I think something like this may be what you are looking for. Here is the link to JSFiddle (http://jsfiddle.net/bUrmK/2/).
HTML:
<div class="test">
<div class="before">
</div>
CSS:
.test {
background-color: grey;
overflow: hidden;
width: 300px;
}
.before {
background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
width: 100%;
height: 100px;
background-position: center;
background-size: cover;
/*This will allow for LTE IE-8*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=""http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale')";
}
I get it now, you can use a single div:
HTML
<div class="cropped"></div>
CSS
.cropped{
background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
width: 300px;
height: 200px;
background-position: center;
background-size: cover;
}
This CSS code does work in all browsers except FireFox. Why ? How can I fix it ?
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
}
Thanks in advance.
EDIT:
Here is the HTML that I want to use:
<img class="img_box" />
When Firefox encounters an image without a source, it replaces the image with its alt text. I personally find this extremely annoying, as it means I can't test layouts unless I specifically create placeholder images, and should those images be unavailable for any reason the layout completely breaks.
Unfortunately, I have yet to find a solution to this problem.
In your case, however, you would be much better off using a div and adding display:inline-block to your CSS, instead of using an image.
solution1:
.img_box {
width: 110px;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('https://www.google.com/images/srpr/logo3w.png');
display: block;
}
solution2:
<div class="img_box"></div>