I have 3 horizontally aligned images. I set a background image (background image) for the aligned images as below. When I run my code, the background image flows over the images. I want the 3 aligned images to appear on top of the background image. I tried to use box-shadow which couldn't work. I don't want the background image to cross over any of the 3 aligned images. How do I do this please?
HTML
<div class="col-lg-12">
<img src="images/background.png" alt="Change">
<div class="img">
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="/images/change.jpg" alt="" width="426" height="479">
</div>
</div>
</div>
CSS
//how I align my 3 images horizontally.
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}
Hm, so you want the background.png to appear behind the other images? If you insist on having it within the DOM, you'd need to remove it from the document flow. Something like this:
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}
.background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-anchor {
position: relative;
}
<div class="col-lg-12 background-anchor">
<img class="background" src="https://placekitten.com/1300/1300" alt="Change">
<div class="img">
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/425/479" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="https://placekitten.com/426/479" alt="" width="426" height="479">
</div>
</div>
</div>
css :
.img {
background-image: url('../images/pic.jpg');
}
this is the right way to put a background image in css
get more information from : W3school
Related
I'm trying to build a website and to do so I followed this html code and this css code; this guy created a grid of 12 cool images with logos and animations, but they're not linkable. What I would like to do is to make them linkable and to do so I created this code but it's giving me weird stuff; any help please?
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(Immagini/Crypto.jpg)">
<img src="Immagini/Crypto.jpg">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="Immagini/Logo/Bitcoin.png">
</div>
</div>
</div>
</div>
I'd suggest not making the images background images if you want to make them into links. Try this:
<div class="portfolio-img">
<img src="Immagini/Crypto.jpg">
</div>
And the CSS:
.portfolio-img {
height: 350px;
width: 100%;
}
Check this solution
.click-img {
position: relative;
display: block;
}
<a class="click-img" href="#" title="Clickable background image">
<img src="https://picsum.photos/seed/picsum/300/300" alt="Your Image">
</a>
I have this piece of code. It doesn't scale my images to this size.
Height and width doesn't work. Why?
in style.css i have this line:
.gallery-popup .image-container img{width: 100%; height: auto; display: block;}
<div class="trace">
<img src="img/content/Imagesall/13347.jpg" height="250" width="250" alt="" />
<div class="tagline">
<div class="content">
<div class="title">TITLE</div>
<div class="description">TEXT</div>
</div>
</div>
</div>
<div class="overflow">
<div class="swiper-container" data-autoplay="0" data-loop="1" data-speed="500" data-center="0" data-slides-per-view="1">
<div class="swiper-w">
<div class="swiper-s">
<div class="image-container">
<img src="img/content/Imagesall/13347.jpg" height="250" width="250" alt="" />
<div class="description">
<div class="title">titletext</div>
<div class="text">texttexttext.</div>
</div>
</div>
</div>
Without any css to look in is this the responsive css for <img> images. Give the img a width and set the height to auto. You do not have to use the height and width in the html, use the css to give a width only
<div class="trace">
<img src="img/content/Imagesall/13347.jpg" alt="" />
.trace img {
width: ...; /* use for example px or % */
max-width: 100%;
height: auto; /* this line to preserve width:height ratio */
border: 0; /* remove default border of img */
}
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
I have a gallery and the thumbnails are set to have a width of 100%. however some images do not fill the full height of this div.
How do I get it so that the images stretch over the full width and height of the div? (can't be changed to background images)
<div class="gallery-grid">
<div class="section group">
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
</div>
<!--style-->
.gallery-grid img{
width:100%;
}
It works for me. You must have some other css affecting it. See here: http://codepen.io/anon/pen/JGmRBW
.gallery-grid img{
width:100%;
}
Try this:
gallery-grid .section .col a{
display: block;
}
.gallery-grid .section .col a img {
width: 100%;
height: 100%;
}
You should consider that a is an inline element, so to put an image propely in it, you may need to set its display property correctly.
In action
a{
display: block;
width: 100px;
height: 100px;
}
img{
width: 100%;
height: 100%;
}
<p>The parent anchor has 100x100 dimensions:</p>
<p>The child image has 100x50 dimensions:</p>
<img src="https://placehold.it/100x50">
Hai I am new in html and css.I need some help.I have 4 images given below.
The main Background image
Link image1
Link image2
Link image13
And I need to look the all images finally like
Final Look
My html is like
<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="/media/19134/001.jpg"/>
<img src="/media/19133/Twetter.jpg"/>?
<img src="/media/19133/facebok.jpg"/>
<img src="/media/19133/insta.jpg"/>
</div>
</div>
Can any one help on css to position the social link images.
<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="http://i.stack.imgur.com/mxD7P.jpg"/>
<img src="http://i.stack.imgur.com/lBlEE.jpg"/>
<img src="http://i.stack.imgur.com/FbE0s.jpg"/>
</div>
</div>
In css:
.aside-block__content {
background: url("http://i.stack.imgur.com/msmci.jpg") no-repeat;
width: 310px;
height: 100px;
}
.aside-block__content a img{
float: right;
margin-top: 50px;
margin-right: 30px;
}
DEMO : http://jsbin.com/kexam/1/edit
You can put the "follow us" image as a background image and float the icons right with margin-top and right to position them as desired :
FIDDLE
HTML:
<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="http://i.stack.imgur.com/lBlEE.jpg"/>
<img src="http://i.stack.imgur.com/mxD7P.jpg"/>
<img src="http://i.stack.imgur.com/FbE0s.jpg"/>
</div>
</div>
CSS:
.aside-block__content {
width:314px;
height:115px;
background-image: url(http://i.stack.imgur.com/msmci.jpg);
}
.aside-block__content a{
float:right;
margin:50px 30px 0 0;
}
There are a couple of ways to do this.
You could do this by...
HTML:
<div id="wrapper"> <!-- wrapper with the background - image -->
<div id="social_media"> <!-- a container for the social media icons -->
<img class="icon" src="/media/19133/Twetter.jpg"/> <!-- Your Icons -->
<img class="icon" src="/media/19133/facebok.jpg"/>
<img class="icon" src="/media/19133/insta.jpg"/>
</div>
</div>
Css:
#wrapper { background: url(/media/19134/001.jpg) no-repeat; }
#social_media { /* Your positioning */ }
.icon { float:right; margin-left: 20px; }