Good evening,
I am a bit stuck on a project I am working on...
The image in the header of this site, when downsizing the screen, the image doesn't respond, it simply gets cut off on the right hand side.
Can anyone help tell me what I am missing? Thanks in advance :-)
If you don't want your image would be cut off then use 100% background-size but it stretch the image:
div{
background: url(path.jpg) no-repeat;
background-size: 100% 100%;//but using cover would be better to look
}
Related
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'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.
I have a navbar and footer than I grabbed and customized from Bootstrap's site. I now want to have a background imagine, but I'm unsure how to do this. I know if I wanted to have just an imagine, I could put it in a div between the navbar and footer and set play around with height:100%; width:auto; so that it resizes with the browser (although this doesn't work perfectly without some modifications) but I don't know how to do this if I have body { background-image: url('...'); } I have a large resolution picture in there right now, and on a 1080 screen it doesn't scale down, it just shows 1080px of the original imagine. Is there anything in Bootstrap or CSS tricks I can use? This might be trivial to some but I am new to this, just finished Codecademy courses which introduced me to Bootstrap and now I'm trying some stuff on my own.
So to recap I want to have 16:9 ratio of a large picture, if the browser becomes to narrow, I want the height to stay the same and start "cutting off" the left/right sides of the image so that the center of the image is still in the center of the browser. Likewise for vice versa. the height:100%; width:auto; doesn't quite work because if the ratio is wrong, it stretches the image.
I also want to have a different picture if the website is accessed from a screen-reader, but that's a project for another day. Let me know if I need to clarify anything, and thanks in advance
Use your CSS this way to make the background responsive.
body {
background-image: url("myimage.jpg");
background-size: cover;
}
Then when the page becomes "too narrow" use media queries to switch the background-size properties to actual width and height that work the way you have in mind.
I am so sorry for asking this question here because I'm pretty sure it's not 100% what this forum is for (although it is CSS I presume) but I asked on another forum and no one understood what I was talking about!! So I thought: I'm 100% sure someone here will know!
What is the website box shadow (I think it's a CSS box shadow?) that they use on websites like this one:
http://www.rcgp.org.uk/
-the box shadow I mean is to the left and right of what I assume would be the body container and it helps give the page a general frame - of note the shadow slowly fades and disappears completely by the end of the 'Find Courses & Events' box.
Thank you in advance and I appreciate your wisdom!
This page uses a fixed width container (940px, #wrapper) for all content. The shadow is simply an image which has just the correct dimensions:
body{
/* ... */
url("../images/main-bg.jpg") no-repeat scroll center top transparent;
}
I folks. This might be more of a design question but I thought I'd give it a whirl in case someone had some masterful CSS techniques I could use. If not, I'll brace myself for the onslaught of down-voting and nay saying!
You can see the logo holder here has a background image with a nice gradient to the right, and is obviously semi-transparent. My client is looking for a gradient at the top and right side. Any ideas on how I can accomplish this?
alt text http://www.linkhostmedia.com/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-28-at-4.31.45-PM.png
Thanks in advance.
The most obvious solution would be to use a partially-transparent image as the background-image for the container-div.
#container_div {background: transparent url(path/to/image.png) bottom right no-repeat; }