I have the following code:
<div class='row front-page-img' style="background-image:url('http://img2-3.timeinc.net/people/i/2014/news/140428/coachella-crowd-600.jpg')">
</div>
<div>Below image</div>
.front-page-img {
background-size: 100%;
width: 100%;
height:400px;
margin: 0;
opacity: 0.4;
background-position: 0px -200px;
background-repeat: no-repeat;
}
I am happy with what I am seeing. That is, I like the portion the of image that I currently have. The two things that I don't like are that are the following:
When I make the screen smaller the img gets pushed up and disappears as the screen gets small. I want it to always have the same section of the image, but just scaled down.
For some reason there is white space below the image that is now allowing other elements to follow the image.
Anyone know what I am doing wrong and how i could fix this? Later, I would like put an input tab over this image incase that changes the approach. Thanks!
jsFiddle
Just use Bootstraps img-responsive class with an inline image. If you do not want the upper part of the image to be shown, just crop the image.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
.front-page-img {
opacity: .4;
}
.front-page-img > img {
width: 100%;
}
<div class="front-page-img">
<img class="img-responsive" src="http://img2-3.timeinc.net/people/i/2014/news/140428/coachella-crowd-600.jpg" />
</div>
<div>Below image</div>
You can try this:-
.front-page-img {
background-size:cover;
height:400px;
opacity: 0.4;
background-position: 0px -200px;
background-repeat: no-repeat;
}
This works better for what you want.
background-position: center bottom;
Update your CSS to the following.
.front-page-img {
background-size: 100%;
width: 100%;
height:0;
padding-bottom:40%;
margin: 0;
opacity: 0.4;
/* background-position: 0px -200px; */
background-repeat: no-repeat;
}
By setting the height to 0, we can use padding-bottom to maintain a fixed ratio as when you use percentage based padding it is relevant to the element width.
Related
I want to create something like this for the top section of my one-page website.
repeating background image with a gradient
I have figured out how to repeat a background image, but I was wondering if there is a way I can specify opacity for each time the image gets repeated.
This is the CSS code I've used for the section:
section{
width: 100%;
float: left;
height: 100vh;
background-image: url("img/bgflower.jpg");
background-repeat: repeat-x;
background-size: contain;
}
Please suggest any methods I can use to achieve the same, thank you!
If you want to have true gradient instead of visible opacity regions, you can do something like my code below. Unfortunately this does not really apply opacity to your image and works only with one color (like in your example picture you have white).
#background {
/* place at the top of your page */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* set background image */
background: url(https://pyry.info/stackoverflow/flower.png);
background-repeat: repeat-x;
background-size: contain;
}
/* create the white gradient */
#gradientLayer {
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
<!-- place this below everything else -->
<div id="background">
<div id="gradientLayer"></div>
</div>
I'm not sure if the section you made is responsive or if it sits within another container that has a fixed width. With the codes below, a fixed width will render a better result. However, I made something up in codepen to help you move along. https://codepen.io/jennift/pen/qBRJOYd?editors=1100. I've included some comments in the code below:
<section>
<div class="extended">
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="fourth">4th</div>
</div>
</section>
section {
width: 100%;
height: 100vh;
background-image: url("https://placeimg.com/200/480/nature");
background-repeat: repeat-x;
background-size: contain;
}
/* again I'm not sure if you will use the same image bg. However, if you intend to change, remember to change the aspect ratio here as well so that the white layers on top will lay somewhat nicely aligned with the bg */
:root {
--aspectratio: 0.416; /* divide bg image width with bg image height of bg image > 200 / 480 */
}
.extended { /*this extends the container box so the divs stays in a row instead of breaking into a new line as the screen gets resized to something smaller */
width:500%;
height: 100vh;
overflow:hidden;
}
.first, .second, .third, .fourth {
background-color: #fff;
height: 100vh;
float: left;
width: calc(100vh * var(--aspectratio)); /*using the aspect ratio, you can then calculate the width of each white section
}
.first {
opacity:0;
}
.second {
opacity: 0.3;
}
.third {
opacity: 0.6;
}
.fourth {
opacity: 0.9;
}
With the codes above, if your section gets wider than this, you probably need to put in a fifth div, and probably javascript will be easier solution to auto-create divs as the screen gets wider/smaller. But if your width is fixed, this way works well.
Is it possible to add a background-image on an <img> tag? I cannot create a <div> around it for now (due to other restraints). I'm wondering if it's possible on just the <img> tag. Thanks.
img {
width: 500px;
background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png');
background-repeat: no-repeat;
z-index:100;
}
<img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">
Use padding and add the image there:
img {
width: 300px;
padding:0 0 50px 0;
background: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px;
background-repeat: no-repeat;
}
<img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">
Like below by considering multiple backgrounds and by keeping only the padding area:
img {
width: 0;
height:0;
padding:300px 500px 0 0;
background:
url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px,
url(https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg) center/cover;
background-repeat: no-repeat;
}
<img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">
Yes, this is possible - but the img would need some transparency for you to see the background image of course.
This snippet is the same as yours but with the actual img src removed and a width and height put on the img element so it has some dimensions, since it isn't in this case picking them up from the img itself. You can see the StackOverflow logo emerging from underneath.
img {
width: 500px;
background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png');
background-repeat: no-repeat;
z-index:100;
}
<img src="" width=200 height=200>
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%;
}
The effect I'm trying to achieve is the first main picture on this website: http://shop.soot.me/
As far as I can tell, this is being achieved by background, not <img>. Is it possible to achieve this with the <img> tag? I tried my hand in it, but it's not exactly there.
https://jsfiddle.net/jzhang172/e1javm23/
.box{
width:100%;
height:500px;
background:black;
overflow:hidden;
}
.box img{
max-width:190%;
min-height:100%;
}
<div class="box">
<img src="http://www.hdwallpapersnew.net/wp-content/uploads/2015/12/landscape-desktop-hd-wallpaper-images.jpg">
</div>
Here is a fiddle of code that fills the image to 100% of the width of the box container. https://jsfiddle.net/9pjxeo6o/
Is this what you are looking to do? The website that you referenced actually does use the background property to create the effect that you are talking about. I suspect that this is actually what you are wanting to do, rather than just using an image. This code handles the background cover:
.homepage-hero-video, .homepage-hero-image {
display: block;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
The background-size: cover; stretches the image to the width of the container automatically.
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/