I'm trying to have a background image use up all the space of it's container.
Things looked pretty straightforward, using background-size:cover but it doesn't work properly.
the page I'm working on can be found here
the background image is declared inline in the div with class x-bg-layer-lower-image:
<div class="x-bg-layer-lower-image" style=" background-image: url(http://jeango.net/thesphere/wp-content/uploads/2018/03/background-header.png); background-repeat: no-repeat; background-position: center; background-size: cover;"></div>
when I inspect in chrome, i clearly see that the div has it's height and width correctly occupying the entire screen. Yet the background image doesn't use up the entire space (see screenshot)
I can't see what I'm doing wrong here. Perhaps someone can help
Lol, Don't mind but you are such a headache man, I wasted around 30 mins finding a solution for you... Look at your background image once, it already has white spaces in top and bottom. You CSS is correct. Try opening the background image in browser and see.
Ha ha ha.
Related
I'm trying to make a website and I want an image (1920 × 1080) to cover the whole page. I used:
background-repeat: no-repeat;
background-size: 100%;
And it looks fine. But when I resize my browser and pull it down vertically, the image does not come with it. I want my picture to resize for example like this site: https://www.okainsbayseafood.co.nz/ (when you resize the browser vertically the image goes with it)
Sorry for my English and if I sound stupid
my webpage
Switch background-size from 100% to cover:
background-size: cover;
This tells the browser that the image should fill the available space, and will alter the dimensions of the image to do so.
Note: If you are adding this CSS to an element that is not the body tag, you may need to add additional code to resize the element to which you are adding this background. This CSS will create the desired effect if added directly to the body element.
Actually you have many possibilities to get such a result:
The page you linked above uses so called breakpoints, where it loads a resized image based on the screen size. This is indeed a good idea in that case, because they use very large images, which would load forever on small screens and low bandwidth.
For you, as a beginner, it is probably better to firstly get some deeper knowledge into CSS and what you can do with just a single image, and after that you can opt in to optimisations like the site above. So for you something like that would probably work:
background-image: url("yourimage.jpg");
background-color: #cccccc; /* Used if the image can not be loaded */
height: 100vh; /* You must set a height. (unless you have child elements that take the entire space) */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Resize the background image to cover the entire container */
Study that CSS code and make sure you understand what it does and what other options you have. You might play around with some values there and get some other results.
I am helping a friend setup a web site for his company. At the top of the page, below the navigation bar, I have a background image of a house that is set to 100% width, image size is 2400px x 1602px. My problem is how to control the image so that the house is always front and center. I also need to keep the height at (or around) 75vh.
I have tried using background-size: cover and contain, as well as setting background-positions. But with the way cover works, the house is not always centered. Especially when browser width is larger--then only the roof of the house is visible. Next I tried using the aspect ratio of the image for padding. This works well, but does not allow me to set height (as far as I can tell) so with larger screens I end up with the height being way to big.
Was hoping someone might have a suggestion that would help me out and point me in the right direction. What I would like to have in the end is an image of a house where the house is always viewable and also be able to keep the height # 75vh. I have a feeling that media queries may be my answer, but wanted some advice before I continue on that path. Also wasn't sure if I need to crop my image to limit the height? I have tried so many different things that I am not sure how to proceed. Thank you for any suggestion, I really appreciate it.
I think the background cover image is the right approach, you might just have something wron gin your code that is not centering the image and that is why you only see the roof (top part of the image I assume) instead of the middle part in very panoramic screens.
Here is the code I would use:
This is the HTML
<div class="header">Your menu and other header stuff goes here</div>
<div class="bg_image" style="background: url('https://www.marriedwithmoney.com/wp-content/uploads/2017/06/house-1024x698.jpeg') center center / cover no-repeat;"></div>
And this is the CSS
.header {
width: 100%;
height: 200px;
background-color: #ccc;
}
.bg_image {
width: 100%;
height: 75vh;
}
and here is a working example which does what you inted if I understood your situation correctly https://codepen.io/anon/pen/REerRR
I need to create div which include background image, and I've tried many ways, but none of these is working.
.tiket{
background: url('ticket.png');
background-image: image-url('ticket.png');
background-image: asset-url("ticket.png", image);
background-image: asset-data-url("ticket.png");
}
But if I open the chrome develop debugger, it will show picture like this
Here is github, if you need more information, please tell me.
Update
Here is jsfiddle
This should be a comment, but I'm too new to do so; sorry. The .ticket div can still have a height of zero if all of its children are floated or otherwise taken out of flow. If you inspect the .ticket div, what width/height are given?
I have an JPG image with size 1024 x 724. My page size is not fixed.
My requirement is:
If I resize the page then the background image should also resize and fit to the page.
Also I don't want to keep the image related information in my Html page/JSP. I want to do this using plain CSS. I am not using CSS3. Because there is an attribute called background-size which can make the image stretch to the page width and height. Currently only Google Chrome supports this.
Any help ?
You can't resize background images with CSS2.
What you can do is have a container that resizes:
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>
This way, the div will sit behind the page and take up the whole space, while resizing as needed. The img inside will automatically resize to fit the div.
try something like
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
You can either use JavaScript or CSS3.
JavaScript solution: Use an absolute positioned <img> tag and resize it on the page load and whenever the page resizes. Be careful of possible bugs when trying to get the page/window size.
CSS3 solution: Use the CSS3 background-size property. You might use either 100% 100% or contain or cover, depending on how you want the image to resize. Of course, this only works on modern browsers.
Depending on what kind of image you have, it might be better to rework the design so that the main image fades to a set solid color or repeatable pattern. If you center the image in the page and have the solid color as the backgroud.
See http://www.webdesignerwall.com/trends/80-large-background-websites/ for examples of sites using large or scalable backgrounds.
These three line all together worked for me.
background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;
background:url(bgimage.jpg) no-repeat;
background-size: cover;
This did the trick
Hi I have a 1px png file,which I am trying to set as a background image for two divs which are adjacent to each other horizontally.The html and css are as under:-
<div id='one'>hi</div>
<div id='two'>hello</div>
The css is like this
div {
width: 50%;
height: 50%
}
#one, #two {
background-image: url(/images/image.png);
background-repeat: repeat;
}
Now the problem here is in between the two divs a black border automaticaly appears when the image is set. I dont want the two divs to be seen as separate blocks.Please help. Am totally new to css and need help:-)!
I'd be willing to bet that the image you are using has alpha transparency (that is, the image is partially transparent), and what you're seeing is a one-pixel overlap between the two divs. Either make sure that the container is an even number of pixels wide, or put the divs inside another container and use the background on that instead.
like robert, i'm also not getting the border, but i do get some repeats.
see if this works for you:
#one, #two{
background-image:url(99785.jpg);
background-repeat: no-repeat;
borders: 0
}
The problem is caused by a couple of interacting things.
First, make sure you are using the html strict doctype. This will help mitigate a lot of the formatting issues between browsers around divs. See alistapart for a description and list of real doctypes to use and quirksmode for a detailed comparison of them.
Second, you will more than likely have to set the margin of your divs to 0. Browsers have different default settings. A strict doctype will alleviate most of this, but there are usually other areas you have to overcome as well.
Also, you might want to grab firebug for firefox and leverage chromes dev tools. firebug will actually show you what all of the margins / padding / everything else is being set to. The Chrome tools don't give you a pretty picture with the details but you can see what the margins/padding/etc are in the Computed Style section.