I am try to create a div with an navigation bar image, yet the image get scaled up and becomes blurry.
In the picture you can see the original navbar overlayed in photoshop over the one that the website renders. What do you think might be the issue?
<div id="TopCenter" style="width: 70%; background-color: #0F1841;
top: 0px; position: absolute; height: 90px; left: 30%;
background-image: url(navbar.png); background-repeat: no-repeat;
background-position:left center; "></div>
It happpens, because you are using a width and height that is probably larger than the original image, so that's why it loses quality.
Related
I'm trying to put an image OVER an existing image, by way of CSS background-image:url(...).
I have the following class:
.imageContainer {
width:318px;
height:207px;
background-image:url('images/Generic Chrome Notification no_image.png');
}
Then, I have this class:
.iconImage
{
width:45px;
height:45px;
background-image:url("https://image.s7.sfmc-content.com/lib/fe9613727166077c73/m/1/bf347e87-2e3f-4e6d-9c5f-806d3ef1e4af.png");
}
Finally, here's the output:
The white square in the image above (number 1) is actually part of the number 2 image. I have my HTML laid out such that the white square above corresponds to the first CSS class mentioned above. But, I don't see the image there. I F12'd Dev Tools to make sure that the <div class="iconImage"></div> was actually in the white square, and it is.
So, is it possible to super-impose images on top of each other by using background-image:url(...)?
The (background) image you are using in .iconImage is 180x180 px large in original. Since you don't define a size, it is displayed in original size, but only a part of it is visible. Here's what the image looks like:
Its size is 180x180px, major parts of it (top and bottom above and below "AMGEN®") are just white, and only its top left is visible in your screenshot: It's a 45x45px white part (the upper left corner) of the image. So everything works as desired, but it looks like there is no image, since that top left part is just white...
The one thing you have to change to show the whole image scaled down (which you probably want) is to add background-size: cover...
Yes you can, here is an example with 2 images overlaid on top of a another image
.img1 {
position: relative;
height: 400px;
width: 400px;
background: url(https://images.unsplash.com/photo-1587613754760-cd9a285831b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60) no-repeat;
background-size: cover;
}
.img2 {
position: absolute;
top: 20px;
left: 20px;
height: 100px;
width: 100px;
background: url(https://images.unsplash.com/photo-1589292943875-996861aa36a3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60) no-repeat;
background-size: cover;
}
.img3 {
position: absolute;
bottom: 20px;
right: 20px;
height: 100px;
width: 100px;
background: url(https://images.unsplash.com/photo-1589469884538-4e5d63671b09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60) no-repeat;
background-size: cover;
}
<div class="img1">
<div class="img2"></div>
<div class="img3"></div>
</div>
I think I have an impossible task but before giving up on this I want to be sure that it's really not possible. Maybe it's possible with millions of media queries, but that isn't worth the struggle.
However, I have a backgroundimage with a height of 100vh, meaning it's always 100% height of the users window, and a width of 100%. These two things might make my task impossible.
Within the background image I have another image which should always be on that position, no matter what.
I came up with an example. I want the rocket always stay on that rectangle on the planet. I made this possible on my screen, but it could slip on your screen due different screen sizes.
(stackoverflow doesn't allow images with http, so please change the image src to http or take a look at my codepen: https://codepen.io/anon/pen/yjXbPL)
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
img {
width: 150px;
position: fixed;
top: 240px;
right: 780px;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>
Is this possible?
Use Position fixed as u do.
Use Left and top, not right.
Put the image beside the background div not in it.
Attached codesnippet shows you a solution. It is based on that you put your rocket and background in 2 different divs and stack them by using CSS-index.
Further on, the rocket is positioned fixed and I added a height of the background that makes it a bit scrollable.
Now, to solve the graphical split of the rocket and the background image you would have to create them as 2 different images and place them into each respective div in the HTML (see codesnippet).
In terms of using different devices you would have to test how the rocket might change position and solve that through a combination of media queries, and potentially use % position instead of px (to position the rocket correct):
.background-pic {
position: absolute;
z-index: 1;
width: 200px;
height: 1000px;
background-color: darkblue;
}
.rocket {
position: fixed;
z-index: 2;
width: 50px;
height: 50px;
background-color: orange;
margin: 100px 0px 0px 100px;
}
<div class="background-pic"></div>
<div class="rocket"></div>
The reason why this can be really hard to achieve is because you're using background-size: cover; which means stretch the image while keeping its aspect ratio and crop the image in order to fit its container's height and width. When you combine this with background-position: center center; it will crop on the edges equally. Then finally you're using two different kinds of measurement units: height: 100vh; width: 100%;
The question then becomes, before the image is cropped, what's the new width and height for the image that "cover" is applying?
This is something very difficult for CSS to determine because it requires things like knowing the ratio of your image (2560x1600 has a ratio of 1.6:1), then trying to fit it inside a container of variable width and height such that it is just small enough to fill it, while cropping out anything left out, before it is cropped, what is the actual size of the image?
Both height: 100vh; and width: 100%; will affect its size, in the manner explained above. As this requires comparing the image's original height and width, with the container's width and height to determine how to stretch the image, trying to figure this sort of math out with pure CSS isn't an easy feat for CSS to achieve without some assistance from JavaScript.
A decent solution is to add a bunch of transparency to the rocket image so it has the same size as the background so it can also go through the same "cover" stretching and cropping logic.
Give this a shot:
https://codepen.io/anon/pen/xjrPvM
HTML:
<div class="background" data-comment="2560x1600 has an aspect ratio of 1.6:1">
<div class="rocket">
</div>
</div>
CSS:
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
.rocket {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
background-image:
url('your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png');
}
Within the codepen I used a base64 encoded version of "your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png"
which is just the rocket placed on a 2560x1600 canvas I did in GIMP, transformed it -20.0 degrees moved it around so it's placed where you want it then exported it as a PNG.
Instead of using the image as background, I've used an inline image with the rocket placed on top. Then the rocket and background are made responsive relative to each other.
.background {
position: relative;
}
.background img {
max-width: 100%;
display: block;
}
#rocket {
top: 49%;
left: 47%;
width: 15%;
height: 15%;
background-image: url(http://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg">
<div id="rocket"></div>
</div>
Up to some point, it's possible. Here is my solution for that, I have tried and tested your code. These are the changes to fix your code:
Set the position of the image to fixed:
img
{
width: 150px;
position: fixed;
top: 50%;
margin-top: 20px; (adjust some pixels as per your need)
right: 50%;
margin-right: -90px;(adjust some pixel as per your need)
transform: rotate(-20deg)
}
Here is the complete working example:
https://codepen.io/atulraj89/pen/MGooLr
I have an background image that I can set with an img tag or through background-image. I'd like the image to always stay centered in the browser. Then when resizing the browser I want the image to stay full size and start hiding the overflow on both the left and the right. The overflow should get clipped on both sides of the image so the center of the image is always in the center.
Try something like this, may need to change slightly depending on your page layout.
.parentElement {
position: relative;
float: left;
width: 500px;
height: 200px;
overflow: hidden;
}
.parentElement img {
position: absolute;
min-width: 100%;
min-height: 100%;
max-width: 200%;
max-height: 200%;
top: -999px;
right: -999px;
bottom: -999px;
left: -999px;
margin: auto !important;
width: initial;
}
https://jsfiddle.net/409u4zop/4/
If you want to use background image you back just do
background-position: center;
Add background size and position
background-size: cover;
background-position: center;
background-size: cover
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
We have a long frame(about 3.5:1 width to height) in the page.
Most of the photos showing are 4:3, bigger and improper aspect rate to the frame.
The long frame is really wanted by the costumer, not to plan to change the frame size so far.
Currently the way it displays is "width resize to the frame width, then fill from the top of the photo to bottom of the frame".
in this way almost half of the photo was cut from the down below, and it looks really bad.
I know it's almost impossible to fit both width and height without ruin the photo.
So my plan is try to display part of the photo from the center.
How should i write this CSS?
Note: the "frame" here is a "div"
One option if you want to use img elements is use position and transform to center the img on the frame while keep the proportion with padding like this:
.framed {
position: relative;
width: 100%;
/*Proportion 3.5:1 with the padding*/
padding-top: 28.5%;
overflow:hidden;
}
.framed img {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<h5>Original Image</h5>
<img src="http://placekitten.com/200" />
<h5>Framed Image</h5>
<div class="framed">
<img src="http://placekitten.com/200" />
</div>
Personally, I'd use background-image and background-position. On your frame, you could apply the following CSS:
#myFrame {
background-image: url('/path/to/image.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
background-size: cover; scales the background image proportionally to take up 100% of the frame.
background-position: center; will center the background image, just as you've outlined in your desired example.
background-repeat: no-repeat; is just to stop the background from repeating, which is default behavior.
Of course, change the /path/to/image.png to your relative image path.
Here is an example of this behavior.
Alright, for my site users/members have an option to upload/link a custom image to use for the start page of my site. This works well with nearly all new browsers that support background-size. But does not fill in the entire div section with the image if the browser does not support css3 background-size.
Yesterday I had a chance to test my site on a 25"inch monitor and ended up realizing the image display part failed. What ended up happening is that the image was shifted to the left.
Today checking the code I forgot that I had this line in "background-position: top left;" but I remembered why I left it in the code, the moment I add "top center" or just "top" the background is still displayed however there is like 6 - 10 px white gab to the left of it. I tried using left: 0px; but can't get it to work since I am using position: fixed; and if I change it to position: absolute it displays full image which ends up creating a scroll bar on the bottom.
Here is the code for the CSS part I am using at the moment
#cpBackgroundImg {
background-repeat: no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: fixed;
background-position: top left;
position:fixed;
z-index:-10;
margin-right: 0px;
margin-left: 0px;
background-size:100%;
}
and here is the other part of the code which actually displays the image
<div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="cpBackgroundImg"></div>
Can some one tell me how to fix this problem?
- Thanks
http://jsfiddle.net/Hnwjg/6/
width: 1600px;
Is that monitor you tested it on have a resolution larger than 1600? If so the div looks like it's limiting the width of your image to 1600. meaning there will be white space on the right of the image?
Just a thought.