I put an image in the center over a fixed background image and I would like the image to stay the exact same size (not grow smaller nor bigger) when rendering the page smaller or bigger in any way (left to right and top to bottom).
I tried min-width and max-width, which made the image stay the same size when rendering the page from left or right, but the image does grow smaller or bigger when rendering the page from up or bottom.
Any help will be welcomed
body {
background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
text-align: center;
}
.still{
padding-top: 30px;
}
<img
src= "http://www.comptonacres.co.uk/wp-content/uploads/2015/03/compton-acres-poole-dorset-the-japanese-garden-02-1024x576.jpg" class= "still"
style="width:90%"
>
If you can remove the inline styles and access css give it a fixed width:
.still {
display: block;
width: 300px;
margin: 0 auto;
}
Otherwise in html change style="width: 90%" to style="display: block; width: 300px; margin: 0 auto;"
You can use <img width="300"> it is one of default img
tag properties and don't use percentages if you wanna fixed sizes
Related
Creating a little interactive "game" for my schoolproject. The background image is an image of an office. It will have some stuff in that image that are clickable. for example, there is a computer standing somewhere, so I can click on that part of the screen and it does something.
I currently have set the background on the page, and fits the screen nicely after settings it to cover and aligning it center, issue is only that after resizing it for a small amount the left and right-size start to cut off. I need to make the site responsive for some smaller screens.
How can I avoid the image from cutting off, and just have it perfectly resize? adding max-width/height doesn't seem to work, because it will turn the page blank.
HTML
<div id="pagina2">
<div id="pagina2Background">
<a class="computer">
<div class="computerHover">
</div>
</a>
<a class="bril">
<div class="brilHover"></div>
</a>
<a class="bord">
<div class="bordHover"></div>
</a>
</div>
</div>
CSS
#pagina2 {
width: 100%;
height: 100%;
}
#pagina2Background {
width: 100vw;
height: 100vh;
background-image: url(../img/bureau.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
You can use the padding bottom (or top) by percentage trick to keep a constant aspect ratio. For example, if your image has size: width/height = 4/3, you can use padding-bottom is 75%. See the code below:
div {
width: 100px;
height: 0;
background-image: url('https://api.time.com/wp-content/uploads/2019/12/CatFilterReaction.jpg?w=600&quality=85');
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 40%;
}
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 am trying to put an image in my header and it must auto position it self when the window is resized and the header image must support different screen resolutions.
This is what I have so far:
HTML
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS
.thumbnail2 {
display: block;
max-width: 123%;
height: auto;
width: auto;
}
header {
padding: 0px 250px 0px;
margin: 0 auto;
}
The reason my max width is 123% is to fit the image when in full screen but as soon I resize the window it does not resize itself and the image becomes smaller in width.
Please assist.
I understand the thought process behind your current code however, you are approaching the issue all wrong. You should be using a css media query to adjust your your header if you are looking for granular control depending on screen size.
Since you only have one image and have not included the dimensions of the image or where it should appear in the header, i will assume you want it to be the entire width of the header.
Additionally max-width should never be over 100%. Here is how I would restructure your code:
Note: if this does not fix your issue, you need to resize your image to be larger. If your image is to small it will not fill up the entire screen.
Codepen link
html:
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS:
.thumbnail {
display:block;
/* set width to 100% */
max-width: 100%;
height: auto;
width: auto;
}
header {
/* padding:0px 250px 0px; */
padding-bottom: 250px;
margin: 0;
/* set width of the header to 100% */
width: 100%
}
Try put the image inside the css (not an img tag)
.thumbnail{
background-image : url(MyImage.jpg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
then it would auto adjust to the container .thumbnail width...
You could use JavaScript to dynamically adjust the image size with
the window size:
Auto image resize based on browser window dimensions
You could use Media Queries and select multiple points at which your header adjusts it's size: Resizing images using media queries
You could instead create a "banner" class that utilizes the "backgrounds" family of CSS properties: http://www.w3schools.com/css/css_background.asp
Try changing your code to something like this:
<style>
.thumbnail2 {
position: relative;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("./path/to/image");
min-height: 100%;
}
</style>
<div class="thumbnail2"></div>
You can edit the height of the image shown with min-height, and the width should be responsive.
I have image of size 1400x560 and I want the my jumbotron div to scale to fit the size of the image. It works fine when i set the width of the jumbotron to that of the image but when I shrink the website to mobile view, I have issues. So how can I fix this?
I forgot to mention i have issue with the height and not the width, The jumbotron scales div to the width of 1400 but not to the height 560px
Here is a preview of the html page http://threeguys.us/rts/testing.html.
When i shrink the page , i want the image to resize according to the width of the browser
index.html
<div class="jumbotron">
</div>
css
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
height:560px;
}
What you're looking for is background: contain;. Simply add this to your class as follows:
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
background: contain;
width: 100%; /* make sure to define width to fill container */
height: 100px; /* define the height in pixels or make sure */
/* you have something in your div with height */
/* so you can see your image */
max-width:1400px; /* define the max width */
}
The background image will now scale with the size of the div (assuming the div is scalable). If you want to constrain your div so it does not get bigger than a certain size (in your case, the size of the background image), use max-width: 1400px;
See my JSFiddle example.
There isn't a way to get the div to fit the size of its background image, so I suggest you use an img tag instead.
To get your div to fit the size of the image, use display: inline-block on the div:
.jumbotron
{
display: inline-block;
border: solid red 1px;
}
<div class="jumbotron">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
Try:
background-size: 100%;
width:100%
position:relative;
Hope it helps you
Wrap your jumbotron with:
<div class="container"></div>
It should make it fit width-wise to the rest of your page.
Make it simple. Thanks
.jumbotron {
background-image: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-8362242.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="jumbotron"></div>
I have one problem that I can't solve, I need my banner to be full width, not boxed. For example: the page is 1024px witdh and my banner is 800px width, now i need my banner to be 100% width. If you understand me, so, my friend and me we was trying a lot of options but we didnt figured it out.
Here is my CSS code with banner:
#banner{
background-image: url(mats/banner.jpg);
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
I have tried everything but nothing successful.
It is background-size.
background-size: 100%;
On applying this property, your background image(800px width) would strech to 1024px, which results in image quality loss.
Better applying this property on images with width > 1200px
If the height: 470px is also intended as background height, dont use it.
Never set height & width on a image, it changes the aspect ratio. If one is set, the other will auto adjust according to, else Images looks shrinked or stretched
I think you might missing background-size
#banner{
background-image: url(mats/banner.jpg);
background-size: 100%;
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}