I am trying to create a simple parallax effect using css, I have the following code which created the effect I am looking for, however it seems to zoom the image in, so half of my image is cut off at the corners. How can I amend what I have so that it keeps the actual size of my image?
<div id="slide4" class="slide" data-stellar-background-ratio="0" data-slide="4"> </div>
<div id="slide2" class="slide" data-stellar-background-ratio="0.5" data-slide="2"> </div>
#slide4 {background-image: url("http://2.bp.blogspot.com/-m95Wunj4M-g/T8zFSAFdh4I/AAAAAAAAEhg/y9W8e-Iu4WQ/s1600/Flower-wallpaper-32.jpg");
background-size: contain;
float: left;
margin-top:20px;
height: 450px;}
.slide {background-attachment: fixed;
height: 100%;
position: inherit;
width: 100%;}
try
background-size: cover;
as you can see in this fork of your fiddle
Related
How I can put in the same div in the background two images with css?
<div class="testimonial carousel-item active">
<img class="img-testimonial" src="assets/image-tanya.jpg" alt="">
<div class="text-testimonial">
<p>"I've been interested in coding for a while but never taken the jump, until now. I couldn't recommend this course enough. I'm now in the job of my dreams and so excited about the future."</p>
<p class="small">Tanya Sinclair <span class="grey">UX Engineer</span></p>
</div>
</div>
in .testimonial I have in the background an svg image
.testimonial {
background-image: url(../pattern-bg.svg);
background-repeat: no-repeat;
background-position: right top;
width: 1000px;
height: 800px;
position: relative;
display: inline-block;
}
CSS Multiple Backgrounds
CSS allows you to add multiple background images for an element, through the background-image property.
The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
div{
background-image: url("https://whyy.org/wp-content/uploads/2017/07/LOGO_First_overwhite-1-copy-1024x444.png"), url("https://cdn.iconscout.com/icon/premium/png-256-thumb/2nd-place-594924.png");
background-repeat: no-repeat;
background-position: left top;
width: 1000px;
height: 800px;
position: relative;
display: inline-block;
}
<div></div>
So, I want an image to cover the width of the screen but my CSS code isn't working in order to do that nor can I link the image through CSS so it displays on the page, it only shows when in HTML. I have other images showing fine via CSS so not sure why this won't if you can help. And please help to why it won't be the width of screen. Please note I'm a beginner.
#aboutuspic {
max-width: 100%;
height: auto;
background-position: center;
background-repeat: no-repeat;
}
<section id="aboutuspic">
<div class="container">
<img src="inside.jpg" />
</div>
</section>
The answer is simple - just do this:
#aboutuspic{
max-width: 100%;
height: auto;
background-position: center;
background-repeat: no-repeat;
}
img {
width: 100%;
height: auto;
}
<section id="aboutuspic">
<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/42E9as7NaTaAi4A6JcuFwG-320-80.jpg"/>
</div>
</section>
I think this is what you mean. The issue was that you needed to specify that it has to take up the whole width of the viewport.
I hope this helps you,
Tilier
I have an image that is e.g. 1000x1000 px. I want to insert it into my web page so that it has 500x300 px. I do not want that it is distorted though. I want it to be zoomed down to 50% of its width (so 500x500 without distorting) and then cropped for 300 in height (i.e. 300 px of the image would be displayed from the top of the image of those 500 px).
I am trying to use a normal img tag but if CSS is needed that is ok too.
Thanks.
You can put the image inside div,
and set the div height, width and overflow hidden;
<div style="width: 500px; height: 300px; overflow: hidden;">
<img src="./1.jpg" alt="" style="width:100%;" >
</div>
Create a div that is 500x300 px in size and set your image as the background image to that div, with its size being cover and position being top.
HTML:
<div id="my-image"></div>
CSS:
#my-image {
width: 500px;
height: 300px;
background: url(your-image-location.jpg);
background-size: cover;
background-position: top;
}
Here's some examples. I think what you want would be #example3. On the other hand, you can also see this working example :)
.fit-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: contain;
background-repeat: no-repeat;
}
.resize-image {
height: 500px;
width: auto;
}
.crop-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: cover;
}
<h3>Make the image adapt to the size of the div </h3>
<div id="example1" class="fit-image">
</div>
<h3>Resize an image</h3>
<div id="example2">
<img src="https://via.placeholder.com/1000x1000" class="resize-image" />
</div>
<h3>Crop the image</h3>
<div id="example3" class="crop-image">
</div>
You can achieve this using the following two methods:
Method 1: with CSS and background-image
Ditch the img tag and put your desired image in the background-image property of a div like:
width:500px;
height:300px;
background-image:url('http://unsplash.it/1000/1000');
background-size: cover;
background-position:center;
You can see the working code here.
Method 2: using position:absolute
Put your img tag inside a div and crop out the rest of it using overflow:hidden like:
div{
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
div img{
width:100%;
height: auto;
position:absolute;
left:0;
top: calc(50% - 250px);
}
And the working code.
You should add position,left and top if you want your picture to be vertically centered in the div.
I need your help! I have a background image and I need one part of that image to move (rotate or zoom) whenever you hover it. This image is just an example but it's pretty similar what i have, except mine is more centered.
I want the little sticker on the bowl to move a little (rotate like 20 degrees or any sort of animation to be honest) whenever you mouse over it.
I've already cropped the sticker so now I have two images. I'm using the background as my div's bg. Here's my code:
HTML:
<header class="background-image">
<div class="sticker"></div>
</header>
CSS:
.background-image {
background-image: url(../img/bg-principal.png) !important;
background: white;
height: 90%;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
I've managed to place the sticker where it's supposed to be, but it's not responsive. When the screen is resized, the little sticker moves and I can't seem to find a solution for that. Basically what I need is to pin the sticker to the background image, but I have no idea if that's possible. I looked around and couldn't find anything that worked.
Does anyone have any suggestions? Is there any way that I can do this using only CSS? I only have basic knowledge of jQuery so I'd like to avoid that but if it's the only solution I'd be fine with that too.
Thanks!!
EDIT: I tried using a transparent png sticker the same size as the background, but since I need the hover effect, I end up having the same problem.
If you use vw as a unit of measurement, the sticker can track based on the size of the element
.background-image {
background-image:
url(http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg) !important;
height: 40vw;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
.sticker{
width:20px; height:20px; position:absolute;
top: 20vw; left:40vw;
background:red;
}
<header class="background-image">
<div class="sticker"></div>
</header>
I finally found a solution!
This is my final code:
HTML:
<div class="background">
<img src="..."/>
<div id="pin" class="sticker">
</div>
</div>
CSS:
.background {
margin:10px;
position: relative;
display: inline-block;
}
.map img {
max-width:100%;
display: block;
}
.box {
width:20%;
height:20%;
background-image: url(...);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin {
top:60%;
left:46%;
}
I am having trouble getting my image to display when there are no fixed height and width assigned. I want my image to be flexy and responsive with my grid, so what I thought would work is to set height and width to 100% but no avail.
How can I get the image to show and be able to change size accordingly?
HTML
<div class="row">
<div class="large-12 columns">
<div class="hero">
<img id="image" src="steve1.png" alt=""/>
</div>
</div>
</div>
CSS
.hero {
max-width: 100%;
height: auto;
background-repeat: no-repeat;
margin: 0;
}
Give this a shot:
html {
min-height: 100%;
background-size: cover;
background-image: url(steve1.png);
background-repeat: no-repeat;
background-position: right bottom;
}
body{
min-height:100%;
}
Try adding to the css:
.hero img {width:100%;}
You have to add the style to the img it self, not the container div.