I'd like to add an image to the web page down the y-axis. This image would need to repeat, so I thought a background image would work best. As you'd expect I'm having trouble telling the CSS how tall the page is, especially with dynamic content from WordPress.
<div class="overlaid-image"></div>
<section class="green">Section content</section>
<section class="red">Section content</section>
<section class="blue">Section content</section>
I put together a fiddle to help explain: http://jsfiddle.net/15wc2noe/
Currently, unless I give the DIV a specific height, it won't travel down the full length of the page.
The goal is to get the repeating image to follow down the y-axis of the page to the bottom, without hard coding the height.
Related
I'm trying to implement srcset this way
<img class="i-product-image-big"
srcset="http://dev.test:8000/uploads/thumbnail-80/1602202734The_Reptile_Room_by_Daniel_Handler.webp 80w,
http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp 160w,
http://dev.test:8000/uploads/thumbnail-320/1602202734The_Reptile_Room_by_Daniel_Handler.webp 320w,
http://dev.test:8000/uploads/thumbnail-640/1602202734The_Reptile_Room_by_Daniel_Handler.webp 640w,
http://dev.test:8000/uploads/thumbnail-960/1602202734The_Reptile_Room_by_Daniel_Handler.webp 960w,"
src="http://dev.test:8000/uploads/thumbnail-160/1602202734The_Reptile_Room_by_Daniel_Handler.webp"
alt="The Reptile Room by Daniel Handler">
I edited the code by adding sizes like this
<img class="i-product-image sidebar_image" loading="lazy"
sizes=" (min-width 200px) 320px, (min-width 576px) 80px, (min-width 768px) 160px, 100vw"
srcset="http://dev.test:8000/uploads/thumbnail-960/1586515257Little_History_of_the_World.webp 960w
..........
I open the website in private window in responsive mode first to be sure that the browser didn't load the larger version but the problem is I find out that the browser picks the wrong version (size) of the image. Here it should pick the 320px (it's 322px including 1px border from each side and the image itself is 320px) version of the image but it picks the 640px version of the image. Why is that and how to fix it without using the picture tag?
I reduces the size of the image in css but still loading 640xp version
I reversed sizes like this
sizes=" (max-width 575px) 320px, (max-width 767px) 80px, (min-width 768px) 160px, 100vw"
But that didn't work either
OK, did some tests here (created some filler images to debug). Found what's causing your issue. Not being able to see your full HTML code, I could get the 320-pixel-width image to show in a bare-bones, hand-coded HTML page. When I add the standard viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1">, the 640-pixel-width image will display again, due to viewport scaling. If I were to post your code in a snippet here on SE, the same thing would happen.
Additionally, if I replace the 320_Image.png 320w, with 320_Image.png 2x, and 640_Image.png 1x,, the 320-pixel image will show, but the display will be broken when viewed in the desktop.
If all you’re trying to do is serve an image size that’s based on the viewport width, you’d be best served using 160_Image.png 160w, while for resolution switching, use this: 160_Image.png 1x. A comprehensive resource on responsive images on MDN describes this more fully. And, based on your preference not to use the <picture> element, this article is a good resource. The author recommends not using the <picture> element when all you want is to serve the appropriate image based on the users' device.
For a quick demo, I’ve modified the code a bit, and am using dummy images to show (not including fillers for all the images in the code). If viewed in desktop, the images will switch sizes based on viewport width. For mobile, they will switch based on device width. I only added the CSS to set the image to full-width debugging, but the images with switch without this code.
img {
max-width: 100%;
width: 100%;
}
<img class="i-product-image-big" srcset="80_Image.png 80w,
160_Image.png 160w,
https://i.stack.imgur.com/JkhiN.png 320w,
https://i.stack.imgur.com/Lwddt.png 640w,
https://i.stack.imgur.com/8Z9jL.jpg 960w" sizes="(max-width: 575px) 320px, (max-width: 767px) 640px, (min-width: 768px) 960px, 100vw" src="https://i.stack.imgur.com/8Z9jL.jpg" alt="Test Responsive Image">
Have I misunderstood the img srcset tag if I say that I'd like to specify to the browser what image to show when the screen is max-size: 599px (mobile) and when it's above that?
<img
srcset="
small.jpg 600w,
big.jpg 2000w"
sizes="
(max-width: 599px) 600w,
2000w"
src="big.jpg" alt="Some text" />
This code doesn't behave at all how I'd expect it to. I'd like the browser to show the small image when it's a mobile screen, and show the large one for every other device resolution. Is there no way to do this simply? So confusing.
I've read articles on SitePoint, Smashing Mag, etc, and none of them explains it simply as above. They go into image widths, viewports, ratios, etc. All I need is to specify in a media-query screen resolution style which image to show at which resolution.
Many thanks.
I can not get ChartJS to restrict itself to 200px. It takes the entire width of the browser. What am I missing.
I am using the following CDN
<div id="pnlChart" style="height:200px" >
<canvas id="myChart" width="400" height="200" class="chart" ></canvas>
</div>
my data that is being returned from the server appears to be well formed and drawing the chart correctly. It does not have the width/height in it. (I have pulled this from Chrome's dev tools.
{"type":"line","labels":[0,2,6,7,8,9,10,11,12,13,14,1,3,4,5,15,16,17,18,19,20,21,22,23],"datasets":[{"label":"Data","data":[2,1,8,36,119,179,214,165,87,173,220,0,0,0,0,0,0,0,0,0,0,0,0,0]}]}
You should be able to disable this container-width filling behaviour by telling Chart.js not to use responsive mode. Try passing this into the global configuration of the chart (the highest level of options):
options: {
responsive: false
}
See the Chart.js documentation for an example of how this fits into the full definition of a chart.
If that does not work for some reason then you could instead limit the width of the div element which contains the canvas on which your graph is drawn. Based on your example you could add this to your CSS:
div#pnlChart {width: 200px}
Even if you can get one of these methods to work, ideally you don't want to be specifying fixed widths for items these days because it makes it harder for pages to display well on the myriad of device screens which are in use now.
It's much better to develop a responsive layout for your site which will adjust to suit any screen width, from small smartphones to large desktop monitors. Search online for guides about "responsive design" for articles about this subject.
I have both a Jssor slider with pic thumbnails and a Jssor slider with active captions working but cannot seem to combine them in one slider that has both and works. Is it possible to have both in one slider? What would I add to one or the other to do that? I am not a programmer, just barely familiar with the code enough to adjust it. Thanks for your time and effort!
Sometimes when you check a website, you can find half-transparent div hanging above another div (or image). Like in a sport website, they lay a panel of sport score over an image.
Can I also achieve this using Foundation 4?
The example just looks like the JS component Orbit's bottom, where you can see a half-black div with words on top, while at the same time being able to see the picture.
http://foundation.zurb.com/docs/components/orbit.html
You can achieve this effect buy using relative and absolute positioning in css. Here is an example:
http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex
to make div transparent check:
Transparent background on DIV