Hi there Chris77,
what is wrong with the code that I gave you in…
…which only decreases the width of the container
when a horizontal scrollbar becomes imminent?
Also what is the reason for your belief that using
px units instead of em units is preferable?
Sitepoint Article - The Perils of Pixel Font-Size
coothead
Hi, Chris77.
Please give this a run and see how it behaves. Perhaps it will help you describe your expectations/requirements. The imagebox remains the same height no matter the width of the browser window.
When we post a “working page”, you are supposed to copy it to a file and run it “as is” in your browser to see how it behaves.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>bg-image covers fixed height container</title>
<!--
https://www.sitepoint.com/community/t/2-layer-method-for-image-overlays-for-translucent-coloring/235774/5
Chris77
another guess from ron
-->
<style media="screen">
.element-with-background-image {
height:405px;
background: linear-gradient(rgba(255,0,0,0.1),rgba(255,0,0,0.6)),
url(https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg);
background-size: cover;
background-position:50% 50%;
}
</style>
</head>
<body>
<div class="element-with-background-image"></div>
</body>
</html>
Please criticise the behavior of the “working page” and tell us how it does and does not meet your requirements. That helps us understand your wishes.
Ron, it works as far as stopping shrinking when it get’s down to a certain sixe, but when the browser is very wide the tree tops are cut off.
Coot, your percents work fine until the browser is nattow then the image becomes too small, so i went back to px-s to avoid the too small image size. But, I was spoiled by the large image when the browser is very wide. To solve this I could easily use a media query with the percents (post #5) and then when the browser is narrowed to a certain point (the point where the browser has brought the image down to the minimum size wanted) and then change over to px-s to keep the image at that minimum size wanted. . Insted of doing this it would be nice to have a function setting minimum dimensions for displaying an image. Such a solution may be more convoluted then it’s worth. Thanks - Chris
I’ll be right back.
This adds one simple media query. The behavior seems to be closer to your description.
Please critique and tell us what is needed next?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>image fits fixed height container</title>
<!--
https://www.sitepoint.com/community/t/2-layer-method-for-image-overlays-for-translucent-coloring/235774/5
Chris77
another guess from ron
-->
<style media="screen">
body {
padding:0;
margin:0;
}
.element-with-background-image {
padding-top:75%;
background: linear-gradient(rgba(255,0,0,0.1),rgba(255,0,0,0.6)),
url(https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg);
background-size: cover;
background-position:50% 50%;
}
@media screen and (max-width:540px) {
.element-with-background-image {padding-top:405px;}
}
</style>
</head>
<body>
<div class="element-with-background-image"></div>
</body>
</html>
I was not asking you what was wrong with the code in post #5. 
I was asking you what was wrong with the code in post #13. 
coothead
Hi there Ron,
post #13 gives all the required “media query” points. 
coothead
@coothead, I am not following the ems technique impressively demonstrated in poat #13.
I am still with pixel widths and a percent padding and progressing in small steps because I have not yet grasped exactly how Chris77 wants in his finished product to behave. My incremental method of “discovery” may be off-base. If so, I’ll drop out soon.
Here it is, 'gets bigger with wider browser, stops getting smaller with much narrower browser. I don’t have it lined up to the exact media query pixel whare the narrowing square is at the same exact size as the meadia query, it looks like the media query would have to be a little larger (or the image percentage dimesions changed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
.element-with-background-image {
width: 60%;
padding-top: 45%;
margin: auto;
background: linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.6)),
url(https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg);
background-size: 100% auto;
}
@media screen and (max-width:800px) {.element-with-background-image{width:540px;padding-top:405px}}
</style>
</head>
<body>
<div class="element-with-background-image"></div>
</body>
</html>
Chris77, because you do not understand the properties that you are using, you are mixing and matching properties in ways that will not work. The “working pages” that we are writing are complete packages that work properly. They are not “mix-n-match” code. Neither is yours, once we understand exactly what you want.
Please leave your code in the vault. Please evaluate one of OUR working pages and tell us what you like or do not like about its behavior. Not the code, but the way it behaves in the browser.
Did you actually try @coothead’s code in #13?
Did you step through the teaching exercise that I posted in #14?
What was wrong with the behavior of the page whose code I posted in #24?
How wide should your page be in a desktop monitor? How wide should the background image be in that same desktop monitor?
Please describe how you would change the way the page works/behaves so it behaves the way you want it to?
Any of us can write the code if you will give us a clear picuture of what you what it to do and not do.
Use PhotoShop or GIMP to draw pictures if that is easier for you. It might be easier for us if you do.
This, as all of my previous examples, is a stand-alone working page. Copy it to a file and open it in your browser. Then tell us what is wrong with the working page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>image fits fixed height container</title>
<!--
https://www.sitepoint.com/community/t/2-layer-method-for-image-overlays-for-translucent-coloring/235774/5
Chris77
yet another guess from ron
-->
<style media="screen">
body {
background-color:#def;
padding:0;
margin:0;
}
.wrapper {
max-width:960px; /* Sets the max width of the page and the maximum width of the background image. */
margin:0 auto;
}
.element-with-background-image {
padding-top:75%;
background:
linear-gradient(rgba(255, 0, 0, 0.1),rgba(255, 0, 0, 0.6)),
url(https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg);
background-size:cover;
background-position:50% 50%;
}
@media screen and (max-width:520px) {
.element-with-background-image {padding-top:402px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="element-with-background-image"></div>
</div>
</body>
</html>
If you keep throwing spaghetti at the wall instead of measuring the ingredients, we’ll never come up with a good recipe.
Hi there Chris77,
this link shows the “media queries” example of post #13 in action…
http://coothead.co.uk/chris77-video.html
coothead
Very instructive video!
(OT)
Zooming seems a little bit shaky.
Is that a coconut coming down from the right palm tree?
(/OT)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.