I am new to web development and am using Angular with Bootstrap to develop a practice project. I want to have a header component and in my app.component I am calling the header component. Now In the app.component, I want to have a background image which covers around 50% of the screen including the header. I have tried implementing this, but somehow it is appearing to be wrong. There are couple of issues I am facing.
1) When I scroll down, it looks odd and appears as if the bottom portion of page goes on top of the image.
2) The image is not getting shown in full. Here is my image, if you look in my implementation, the entire image is not getting displayed.
Here is the Stack blitz link to My work.
Please view the demo in full screen: Demo Url
If I understand you correctly, the problem with the css (app.component.css) in 2 rules:
background-attachment: fixed;
determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
So I removed it.
Also:
background-size: 100% 100%;
Which stretch the image to full width / height. In your case, I guess you want that it will take only the full width so the way to do this is:
background-size: 100% auto;
The result is:
https://stackblitz.com/edit/angular-rbtcs9?file=src/app/app.component.css
Let me know if it that you are looking for.
Related
I stumbled across a solution to a problem I was having with a website layout but wasn't sure if it was standard CSS practice or not. I've tested it on multiple platforms and browsers and it seems to be widely supported.
You can see what I'm talking about on this page.
The website linked to isn't my website but uses the same theme. I'm unable to post a link to my website as I'm working on it in a local environment.
The featured images are inside an element with position: absolute and the images themselves are set to width: 100% and object-fit: cover, and are unpositioned (i.e., static positioning).
The problem was I'm using product images and the object-fit: cover style setting was causing the images to get cut off.
The solution was to simply change the object-fit: cover setting to object-fit: contain which I understand is the default setting. This also centered the image even though the width of the images is less than the containing element.
It is happening because, when you use background-size: cover; it expands the image to cover the width of the div or element. In your case, image is being positioned center center that is why you have some top and bottom portion not visible. The only way I see to make this work is to increase the size of the element respectively with image or else resize the image to fit to the div.
If you want to check how it works. you can do this.
inspect element
change background-size: cover to contain
add css property height: 962px;
However, it is not a good idea.
I would suggest the keep it the way you have it now and adjust the background-position: if you want particular area of the image to be covered. or use the image that fit that div.
Also, the height of the div is being controlled with the content inside so make sure you have control on those content too. Easy way is to set min-height for the parent div with background image.
Let me know if this was helpful.
So I have a site with four main sections. The div for each section has a background image. All four backgrounds are the same size. There are also important elements in the images that I always want to show. In the original version of the page the image would resize depending upon the browser window size but much of the height of the background image was hidden in most cases. So I worked with a guy cleaning up the css and in the process we set the background images to always display 100% height. I was OK with some black background showing through on the sides a bit when necessary as long as I kept the height.
Anyway it worked well. The images expanded and shrank with the browser width, but they always showed the full height of the image. I signed off on the job and it looked good. Until I changed the browser window height (which is something I rarely think to do). Then the elements all spilled out to the right and left of the 4 main divs. I realize now that nothing in the document specifies the width of any section, just the height at 100vh. Only the fact that all four background images have the same dimensions makes it look like there are defined margins.
Is there a simple solution to this? I need to define a right and left border to the page to contain all of the inner divs and buttons, but I want to keep the 4 main divs showing 100% vertical height.
We are using
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
to define each of the four divs.
Basically I need a container surrounding the 4 main sections that expands to the width of the images, while still allowing the images to resize with the window, yet it keeps all of the other buttons and divs contained.
The page can be seen here: view-source:http://liquidpropane.io/hold/
It works right now exactly like I want except the buttons spill out the sides if the browser window is too short.
Thanks for the help Justin. In the end I did have to rethink the design. I wanted to keep the idea of using the background collages, but keep the responsive design. I moved the homepage logo out of the background image and into the banner section. Then I moved the important parts of the collage into the center part of the main image, and the less important parts to the sides. That way cropping at the sides will not matter. Finally I decided to remove the rounded text boxes out of sections 1 and 3. I will just use a small bit of landing page text (quite big in a thin font) on those pages and put the bulk of the content in sections 2 and 4. I have not added that text in yet, but the cleaned up version of the background and banner can be seen at http://liquidpropane.io/newhold
I guess the takeaway that is not specific to just my case is that if information in the background image is important and you want a responsive site, then the important part of the image needs to be centered because there is always the likelihood of cropping on the edges.
This question was originally asked over at Wordpress Development but as it concerns a more generic CSS issue I was asked to post it here instead. That thread, and initial explanation, can be seen here.
I have a background-size: cover image set as the header of single posts which used to fill the screen, with content beginning immediately below. For some reason, it no longer does this. The background image itself is scaling to fit the screen, but the content below it (the text of the post) is beginning immediately after the overlaid text.
You can see what I mean in this fiddle.
If I set #hero-header to position:absolute; min-height: 100%; min-width:100%; then the image does fill the screen when you load the page. The problem then is that the content below it runs over the top, rather than beginning just off screen.
Can anyone suggest a solution?
To clarify what I mean by 'fill the screen', following a response below:
The div that contains the background image should fill the entire screen when you load it. At the moment the background image is scaling to fit the screen, but #hero-header is not forcing the content below it off the page – it is falling after the text element, .hero-text, within it instead.
This has fixed the problem:
Background image moved to html and #hero-header set to height: 100vh.
I'm building a website with a 960px design, but the designer has also requested that the page have a full-width background photo across it. He has supplied a 2000px image for this.
However, trickily, part of the photo is integral to the navigation of the page, so the image needs to be centred. So I want the left and right edges to overflow out of the viewport. I've tried to do this using CSS, but have failed.
I could do a javascript version to adjust the left margin based on the viewport when the document loads and the window is adjusted, but I expect it may perform badly, particularly on the adjustment. A lot of the target audience of the site have some serious legacy hardware, so will be using slow computers running IE6. Is there a good CSS way of doing this which would perform better?
UPDATE: Sorry, I wasn't very clear in terms of the "full-width" thing. The content of the site is all restricted to a 960px column, except this particular image, which should be the full-width of the browser window, even if it is greater than 960px. Using background-position is the method which I've already tried, but if I size the particular div to 2000px wide, then I haven't been able to center the div, whereas if I set it to 100% the background-position:center doesn't seem to work
One way you could do this is with background-position: center top;, put the 2000px image as a background to a 960px div like this:
DEMO
As far as I'm aware this is supported on IE6+
Just use background positioning.
body {
background: url(blah.jpg) center top no-repeat;
}
Try something like this on the image:
position: absolute;
left:50%;
margin-left:-1000px; /* half the width of the image */
However, if part of the image is going to be used for navigation, and it has a fixed 2000px width, i see a lot of tears in your future.
Consider dividing the image into layers that can be manipulated individually.
EDIT: As mentioned by Michael this approach is not good.
Here's my dilemma, I've got a background image that has a bar on it. I fit the background image by using
body {
background-image: url("foo");
background-size: 100%;
}
I also have some html that I want to be inside that bar. The problem is, when the user resizes the browser window, the image adjusts to fit it (which is what I want it to do) but the html stays in the same spot, so it gets put outside the bar. Is there a way I can make my html resizable like the image so that it appears that the html is glued to the image? Can somebody give me a css clip for this?
The biggest problem with using images to guide your layouts is exemplified by this issue. Unfortunately, Harrison, you there is no solution that will enable you to do what you want across browsers or browser sizes without changing the image. If you can, please post a screenshot of what it is supposed to look like so that we can help you modify your background to improve its compatibility
In the meantime, I suggest that you remove the bar from the image and continue to use the image as your background. Then use a div with display: block; and use the bar as its background.
If you want the bar to be resizable, set its height and width to percentage amounts of the container height and width. Of course, when the window is reduced in size to a large extent, the HTML would spill out, there's no remedy for that.