I am trying to add multiple images to a page using CSS. I am doing it this way rather than in a more 'straight forward' way to ensure mobile compatibility (it allows me to set percentage widths for the images which allows me to get them to display at the right size on mobile).
I currently have in my stylesheet:
div.image {
content:url(http://example.com/example-image1.jpg);
width:100%
}
div.image2 {
content:url(http://example.com/example-image2.jpg);
width:25%
}
and then a few more images. And then in certain parts of my page:
<div class="image">
</div>
<div class="image2">
</div>
The problem I am getting is content:url only seems to be working in the first instance, that is the only picture that displays. It doesn't seem to be a problem with multiple div.s as if I set the 2nd div to the same content:url image as the first div, that image does actually display twice.
Sorry if this is a dumb/noob question...I just couldn't find an answer.
You forgot a bracket :
div.image2{
content:url(http://example.com/example-image2.jpg);
width:25%
}
EDIT: I tried with the bracket and it worked. I use Mozilla Firefox version 58.
Related
There is a set of images (more than 3):
<img src="http://path.to/my/img1.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
If you don't apply any styles, they go in a row (if space allows to). That's fine, however I want the last 3 images always appear on the next line. Is it possible to make it using pure css?
I've found a close solution:
img:nth-last-child(3){display:block;}
However, it breaks the images in three lines (that makes sense as it is display:block for third image from the end).
jsFiddle example
Looking for a pure css solution.
Thank you.
use
clear:both in css for last three images
img {
float:left;
}
img:nth-last-child(3) {
clear:both;
}
DEMO
I have two images in my page. I want the first one to show up when the user visits the website using a touch device or not supporting Javascript, by targeting them using Modernizr.
The menu button, on top of the page:
<img src="menubutton.png" alt="Menubutton">
The other image, which is just an image used in an article:
<img src="image.jpg" alt="Image">
In my CSS, I have this:
.no-touch img:first-of-type, .no-js img:first-of-type {
display:none;
}
Now, this works almost just fine: the image is not shown on my laptop, but is shown on my iPad. But, the second image isn't also shown on my laptop. However, that second image is being shown on my iPad though. Also, if I target the first image by using an ID, it works the way I want it, but I can't use ID's unless it's really needed. What's happening here?
The first-of-type selector has very limited support. It will also be the first-of-type within its parent element, not within the whole document, this is likely to be the issue.
I have a small image that i need to repeat along the x direction, a specific number of times.
The 'row' of images should be scrollable, and i want to avoid tables if possible.
Is this possible to do with Html + Css? The html code will be dynamic generated using PHP.
Any extra-ideas?
Thanks!
I wonder if ajax has the best looking solutions for you, but you haven't really explained your scenario too well, why are you repeating the same image and making it scrollable? That doesn't sound like valid functionality for anything. Are you trying to scale a background image or something? IF so, what's with the scroll bar???
Anyways here you go:
http://wowslider.com/rq/ajax-image-scroller/
Garry's answer is good. If you just want regular scrollbars, however, wrap the dynamic area (into which you will be loading your images) with a div (or canvas, probably works the same way), and add a class to it. Then you can target all of the images with CSS and have them float, which will line them up, regardless of how many you load dynamically. (Just don't forget to put a width on the container.)
It would look something like this (short-hand, but you get the idea):
div.image-container {
width: 400px;
overflow: scroll;
}
div.image-loader img {
float: left;
}
<div class="image-loader">
<img/>
<img/>
</div>
When I use the page break attribute and then look at my page from i.e7 and click print preview, it generates 3 blank pages between the first and second page.
I have copied some sample code here: http://jsfiddle.net/vW54X/embedded/result/
You can't really replicate the error though because its embedded as an iframe
IE7 does funny things with page-break-after:always.
Instead of applying it to your div#cl, create a new, empty p or div and apply it to that. Place that after the #cl, so
<div id-"cl">
//all your content
</div>
<div class="pageBreak"> </div>
Style it with page-break-after: always but hide it until print.
The solution is giving your body a height: auto;
When I had a similar problem, I resolved it by setting the maximum height of each of my <div>s to a very small amount and gradually increasing it until the problem appeared again.
Basically, just this:
.your-container-div {
max-height: 27.4cm;
}
I'm working on a web application and I'm using the img tag (<img...>).
When the src property is empty, it shows the red x figure indicating that there is no image.
Is there any way to hide that red X icon?
An <img /> tag without an src attribute is invalid HTML. If you do not want to display an image, do not output the <img />tag at all.
If you must output the image tag, thus breaking your html (I wouldn't encourage this), you can hide the [X] in most browsers with one of the following css styles:
<img style="visibility: hidden"/> which hides the image, but still has it taking up space in the page
<img style="display: none"/> which removes the image from the page, making it take up no layout space
The other alternative is to actually link to an image that won't be seen. The classic example of this is to use a 1 pixel transparent gif image. The image won't be visible, although it will effect the page layout.
There's no need adding img tags if you set src to empty string.
If you don't want to print the image, but show it on the screen you can use CSS media types:
<style>
#media print
{
img.noprint {visibility: hidden}
}
</style>
and then add a class to all the images you do not want printed
<img class="noprint" .../>