I'm just trying to show a client a COMP with a full width main image (this is just a comp not a website) but I want it to resize properly. The main area is 1124px. I made a main image 1500 px that I put 100% of the screen. Problem is that when I resize the screen smaller than 1500 px it does not center. I would like the left side to begin cutting off part of the image and keep the image centered. This is easier if you look at the link http://www.gregquinn.com/weg/webdesign9.html and begin making the screen smaller (I want the buildings and tagline to stay in the center.) There must be an easy way to do this with overflow:hidden or something.
Hey now define this css
body {
min-width: 1124px;
}
.home-banner{
background-repeat:center center;
}
Simply add background-position:center; to .home-banner.
Try using the following CSS - background-size:cover;. It will retain the proper proportions while clipping from the edges, if the screen ratio is different than the picture ratio. It will scale with the browser window. Try various background positions, like left top, to achieve the effect that you want.
background-image:url(path-to-your-image);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
You can set the website width, or have the website display 100% width and height of the browser window using the code below. Experment, and see what functions the best.
html{
margin:0;
padding:0;
border:none;
height:100%;
width:100%;
}
body {
margin:0;
padding:0;
height:100%;
width:100%;
border:none;
background-color:#2D2D2D; /*choose a background color similar to your image*/
}
Related
I want to make a responsive Header for my website. Obviously I used the bootstrap .img-responsive class. My Problem with that is, when the screen gets bigger, the height increases too, because of height: auto.
So on a normal Desktop Screen the picture is too big for me. I´ve seen some websites where the image has a 100 % width, but with a fixed hight. If the width is changed the picture zooms in or pans around. Here is an example of what I mean.
I searched for resource on that online but found nothing. Can anybody of you guys help me out?
Thanks in advance!
Expanding on my comment above, if you want the image to scale depending on the screen size while maintaining the same height, use the background-image property on an element with a defined height:
.hero {
width:100%;
height:300px;
background-image:url('https://placeimg.com/1000/450/nature');
background-size:cover;
}
<div class="hero"></div>
If you're not happy with where the image is cropping, you can use background-position to adjust it:
.hero {
width:100%;
height:300px;
background-image:url('https://placeimg.com/1000/450/nature');
background-position:center center;
background-size:cover;
}
<div class="hero"></div>
I having a problem when I view my work in different PCs with different monitor resolution it stretching the the image.
How can I fix this?
.image-bg {
background-image: url("assets/header.jpg");
height:200px;
width:100%;
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;}
<div class="image-bg"></div>
You can change your background-size:100% 100%; to background-size:100% auto; which will scale and crop the image to fit your container size.
Here's a sample jsfiddle:
https://jsfiddle.net/e7g0jknd/
In case you want the image to stick to the top and span downwards, you can use background-position:50% 0;:
https://jsfiddle.net/e7g0jknd/1/
Hope it helps.
The image is stretching because you've specified a height. If you remove the height in your CSS your image shouldn't stretch.
Please use background-size: cover instead of 100% 100% . It will resize propertionally vertically and horizontally read this resources http://www.w3schools.com/cssref/css3_pr_background-size.asp
My home.html looks like this:
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<img class="mod" src="image.jpg" alt="">
</body>
</html>
Note:
1. I haven't put within a as I am not aware if it a good practice, but I have noticed it in all wesites.
2. Didn't use width and height properties in tag, because I was not sure how it would help me.
Now the image is very huge and I want to automatically fit it any of the screens of desktop, ipads or mobile in the below way:
horizontally, the image should occupy the full screen
vertically, the image should occupy half the screen
It is okay if the part of the image is cropped while scaling vertically.
I know the allows viewport, but I want to do it in CSS3. This is what I did:
img.mod { margin:0; padding:0; border:0; background-size:100% }
But it didn't work.
I want my webpage to look this way:
Image
Text
Image
Text
.
.
.
The images should fit completely the width without scrolling needed.
Background size is CSS3 attribute but it works only with background images. In your case you should do something as shown below:
body, html{ height:100%;}
img.mod { margin:0; padding:0; border:0; width:100%; height:50%; }
If you want this to implement using background then use below code:
body, html{ height:100%;}
body { margin:0; padding:0; border:0; background:url(**yourimage**.png) top left no-repeat; background-size: 100% 50%; }
Cheers,
Ashok
Change
background-size:100%
to
width:100%
This will fit the image horizontally across the screen. Note that the height is going to automatically adjust itself to stay in proportion to the width. Trying to set the height to 50% is going to result in a distorted image, because chances are 100% body X 50% body are not the natural dimensions of the image.
To crop the image at 50%, there are a few options. You can google around to find others, but a method I have used before is wrapping the image in a container with a style like this:
.container {
height:50%;
overflow:hidden;
}
See this fiddle
Hi I am trying some stuff out with html and css to see what works and what doesn't, and I was wondering if it is possible to make an image stay in the center of your screen and always adapt to the size of the screen. For example an image that when I look at it on a screen that's 1920*1080 is 192*108 large and when I look at it on a 1600*900 screen it becomes 160*90 whilst the center of the image stays in the middle.
PS: It doesn't matter that the resolution of the image changes even though it makes the image sometimes look terrible.
You can't do this with just an image tag. You could put the image you're using as background-image and then set the sizing to cover. Basically this:
body {
background-image: url('url/to/your/image.jpeg');
background-size: cover;
background-position: center center;
}
To adapt to the size of the screen,place image in container and then do :
img{
width:100%;
height:auto; /*maintains aspect ratio */
}
now image will have the dimension of container!!
To align image in center of your div...do:
div{
width:80%;
margin:0 auto; /*align div in center first*/
text-align:center /*center content*/
}
taken from
Use CSS to make an image scale up and down
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past its natural size, so it doesn't look deformed.
So I am trying to do 2 things that work well on their own, but I'm having trouble integrating them together. First off, here's a link to the site: http://ericbrockmanwebsites.com/dev4
Create a fullscreen background image using
html {
min-height:100%;
background-size: cover;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
create a footer that stays at the bottom of the page, even when there's no content, which normally would require something like this:
html {
height:100%;
}
body {
height:100%;
}
.container {
min-height:100%;
}
#footer {
clear:both;
position:relative;
}
The problem is that in order for the footer to stay at the bottom the height of the html / body needs to be defined at 100%, but unless I define them using the min-height value, the background image just covers the screen as it loads. Meaning that if / when there's a need to scroll down, the background image only goes down to where the bottom of the screen was on load.
I've played around with this for a few hours, but can't seem to find a resolve. Am I missing something obvious?
Firstly, height and min-height aren't mutually exclusive. There's no reason you can't use both. As for the background scrolling when the page is longer than the available space, have you tried background-attachment: fixed?