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.
Related
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.
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.
My Woocommerce brand page header banner (Thumbnail) is not displayed in the original size, it is somewhat zoomed in. When I asked about that my theme support he wrote:
"That section has cover background image, so as per the nature it auto resize the image size to adjust and cover full container and also it is parallax, so it is better to have some more height in your image like 1920px X 1000px."
My image size was 1920x600.
When I added more height it does not fix this problem, because it again is somewhat zoomed in and loses quality, and also some part of image.
So - How can I make my Woocommerce brand page header image to be displayed in the real size, without this zooming effect? Without adjusting and covering full container? I should mention that this zooming effect is also seen in my main page header slider.
My image size would be 1920x600 and I wish that it is displayed in the original image size.
Thank you!
To fix this problem I added a CSS code:
.parallax-fix.page-title-shop {
background-size: 100% !important;
}
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.
I have one big image as a background to my webpage. The image contains a box inside the image itself. How would I place text on that background image such that it should fit in the box, and shrink or resize accordingly (in other resolutions when the background resizes)?
If you're looking to resize the "box" containing the text, you should be able to set the dimensions of the element to percentage-based width and height values with CSS.
If you want to resize the text inside the element, then you might want to consider using JavaScript (perhaps jQuery) to poll the size of the window at set intervals and adjust the text size based on the new window dimensions.
Edit: To clarify, you should be able to set the dimensions of the text box (probably a div) to be a percentage of the page. For example, the div containing the text could be 80% of the window width and 80% of its height. You can then set the margin to be "auto". This should cause the margin around the box and the dimensions to be proportional to the window width.
Example:
<style type="text/css">
div#box {
height: 80%;
width: 80%;
margin: auto;
}
</style>
<div id="box">Text goes here.</div>
This will cause the "box" div to be centered horizontally on the page, but vertical centering is a bit trickier. You'll probably want to look at this page to figure out how to center it vertically to stay within the box in the background.
As suggested by the other individual, you could also make the box background just the background of the text's container and not the entire page background. This might be a bit easier, but I think you will still need to use the percentage-based width and height attributes and auto margin to center it nicely.
For starters, you can't resize a background image. Also, resizing text will need Javascript or a page refresh.
Try making an example at http://www.jsfiddle.net so people better see what you're describing.
UPDATE
Your question is still unclear and I strongly recommend jsfiddle. But if I've interpreted correctly...you're using FancyBox, which suggests you've got some Javascript running your page. Javascript can be used to find if your text is overflowing the container, and can resize it accordingly.
To do this, get your <div> (or container element) and check its .scrollHeight and .clientHeight properties. If the scroll is less than the client, the text doesn't need to be resized. If scroll is larger than the client, you can resize with the .style.fontSize property.
An untested example of what I'm describing is like this:
myDiv = $('containerElement'); // Get container object using its ID
size = 50; // Start with 50px font size
while(myDiv.scrollHeight > myDiv.clientHeight) {
// Decrement font size until scroll is less than client
myDiv.style.fontSize = (size - 1) + 'px';
}
You'll have to do a little legwork on this to get it to work how you like. Things to note:
I used the dollar function to get an object, you can google it for more info
Your container must have defined dimensions for .clientHeight to find
You may need to try .offsetHeight instead of .clientHeight
If you're just looking to control overflow, you can use CSS:
overflow-x:hidden or scroll or auto, overflow-y is the same
white-space:nowrap will prevent auto text wrapping
But, once again, my answer is vague since it's not clear (with code) what you're asking.
The problem with your solution is that it is very unscalable, not friendly to different browsers and will cause more problems as your website expands.
Try separating the box from the other bg image and use the box image as a background for the div you have the text in.