I am having problems with a site's header displaying correctly when a person zooms in with the browser. The banner will cut off on the right side and show the body background image. The address to the site is: http://www.bemidjisportsonline.com, Any ideas on a way to fix this? Thanks. I will post my CSS for the body, header, and banner elements below. A screenshot of what I am talking about can be found here: http://prntscr.com/19e59r.
body{
font: 100%/1.25 Arial, Helvetica, sans-serif;
/*background: url(/_images/background-repeated.png) top center repeat-x;*/
background: url(/_images/background_jersey_green.jpg) #010101 top center repeat-x;
}
header, nav, section, article, aside, footer {display:block;}
header{
width:100%;
position: relative;
background: url(/_images/header_trees.png) no-repeat;
background-size: 100% auto;
height: 7em;
}
#banner{
z-index:100002;
margin: 0 auto;
width:75em;
height:7em;
}
You need to change the background-size. Like this:
header {
width: 100%;
position: relative;
background: url(/_images/header_trees.png) no-repeat;
background-size: 100% 100%;
height: 7em;
}
Try changing the #banner width to 100%.
#banner {
z-index: 100002;
margin: 0 auto;
width: 100%;
height: 7em;
}
Related
I need to place an image behind (or in front of - it doesn't matter) my h1 text, with it positioned so that it will always be a little to the right of the end of the text, like this:
I can't seem to get the background image to display either on top of or behind the text. What am I missing?
h1 {
text-align: center;
}
h1:after {
content: "";
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
background-position: -85px 12px;
background-size: 32%;
width: 400px;
height: 50px;
position: absolute;
}
<h1>Dynamic Headline</h1>
With :after, I can't get the image to display behind or above the text.
In order to shift the background to display on top of the text, instead of the background-position you're looking for margin-left. Note, however, that you can't apply margin-bottom to an absolutely-positioned element, so you'll still need to make use of background-position to adjust the vertical offset. I've changed this to 4px in the following example:
h1 {
text-align: center;
}
h1:after {
content: "";
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
background-size: 32%;
width: 400px;
height: 50px;
position: absolute;
margin-left: -85px;
background-position: 0 4px;
}
<h1>Dynamic Headline</h1>
I would wrap the text with a span, that has left and right padding, and then put the image as the background of the span, and position it to the right:
h1 {
text-align: center;
}
h1 span {
padding: 0 1.3em;
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
background-size: contain;
}
<h1>
<span>Dynamic Headline</span>
</h1>
And the same idea without a span, but not supported by IE/Edge due to width: content-fit.
h1 {
width: fit-content;
margin: 0 auto;
padding: 0 1.3em;
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
background-size: contain;
}
<h1>Dynamic Headline</h1>
I have a web page which I'd like to set full screen image right when users enter the page. I don't want it to be fixed or anything. Just at the size of the window.
Now, I also have a footer which is positioned absolutely at the bottom of the web page. Here is the styles for the footer:
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
min-height: 100%;
padding-bottom: 80px;
color: white;
background: white;
font-family: "Quicksand";
fill: currentColor;
}
/* Footer Section */
footer {
display: flex;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
align-items: center;
justify-content: center;
background-color: $accent-color;
color: #fff;
}
Now, when I try to set my full screen image like this:
.fullscreen-bg {
height: 100%;
background-image: url("/assets/images/scorpion.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The image doesn't show at all, but when I change min-height: 100% to height: 100%, The image suddenly shows up, but the footer now is at the bottom of the viewport, not the page. Here is an image that will explain this perfectly:
https://i.gyazo.com/d47e2e1fcdeaf4f8f8cab8b847c00f43.png
As you can see, the footer now jumps up and resides at the bottom of the screen.
If I change this attribute back to min-height: 100%, the image doesn't show at all:
https://i.gyazo.com/b3d8b941222ac16455d220f25da8bfbf.png
How can I fix this? I want the image to be full screen but also I don't want the footer to jump up from the bottom of the page. How can I combine these 2 behaviors?
Use height: 100vh; it will cover 100% height for all screen sizes.
I am making a simple landing page and am trying to get the following image to be the background fullscreen: image
My CSS currently looks like this:
body {
background-image: url('/images/bg.jpeg');
width: 100%;
height: 100%;
position: fixed;
}
A majority of the image is getting cut off, what's the best way to remedy this?
Thanks !
Did you tried this :
body {
margin:0;
padding:0;
background: url('/images/bg.jpeg') no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
Heres a cool idea for a landing page. The background, being fixed is a popular cool way for landing pages. Please, to see this properly, click "Full Page" on the top right after clicking run code snippet.
#import url(https://fonts.googleapis.com/css?family=Lato:300);
div:nth-child(1){
background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66);
height: 750px;
width: 100%;
background-size: cover;
background-attachment: fixed;
}
div:nth-child(2){
height:400px;
width: 100%;
background-color: black;
z-index: 1;
}
h1{
text-align: center;
color: white;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
padding-top: 300px;
z-index: 0;
text-shadow: 0 0 2px black;
font-size: 50px;
}
<div>
<h1> Michael Barreiro </h1>
</div>
<div></div>
For some reason my header is being pushed down in firefox. It works fine in safari and chrome. I tried making the header position absolute but it sill is pushed down, when it should float up to the left corner of its parent- it doesn't. So this made me think the body was being pushed down, not the header.
so I started to investigate my background-image position on my body tag, but I have tried all kinds of combinations of positioning the image with no luck, and also
.home-body {
position: relative;
top: 0; left: 0;
}
I tried :contain instead of :cover- didn't work.
Then I though it had to do with height: auto, but no.
I have been experimenting with the homepage, although it is happening on all the pages.
here is the site:
http://lindseypod.com/v10/
my body tag:
body {
font-family: 'Roboto', sans-serif;
font-size: 15px;
line-height: 1.5;
font-weight: 100;
padding: 0;
margin: 0;
}
I have a body.home-page with a background-image with a css cover property:
.home-page {
background: url(images/home_2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
thenI have a header tag with elements inside of it:
header {
width: 100%;
background-color: rgba(255,255,255,0.8);
}
.header-content is within header:
.header-content,
.footer-content,
.content,
.bars-content {
width: 96%;
height: auto;
margin: 0 auto;
color: rgba(255,255,255,1);
max-width: 960px;
}
Add this style:
#home-mobile{
overflow:auto;
}
The large margin-top on .home-content > h2 is the source of the problem.
One sensible way to fix it is to add overflow: hidden to .home-content.
This is probably happening in Firefox due to a bug (?) with the handling of collapsing margins.
On my site http://goo.gl/16XdA page "contact us" I'd like the contact-box to be vertically aligned within the container div "contact us". The issue is that with the current code the contact-box gets aligned in the middle of the 1400px height of "contact us" div. Is there a way to align the contact box to the middle of the screen no matter what the screen resolution is? (or put a 100% height for the contact-us div but that did not work)
#contact-us {
height: 1400px;
background: #8aba56;
padding-top: 250px;
position: relative;
background: url(../images/bg-water13.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
#contact-box {
text-align:center;
font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
width: 300px;
Height:120px;
padding:15px;
/*margin-left: auto;
margin-right: auto;*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter: alpha(opacity=95);
opacity: 0.85; /* For IE8 and earlier */
border: 1px dotted #666;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -150px;
}
Change the height for #contact-us to 100%, as well as its parent elements (html and body), and remove its padding:
html, body, #contact-us {
height: 100%;
}
#contact-us {
padding: 0;
}
I took a look at your site on chrome it is in the center of #contact-us. However contact-us is 1650 pixels high because you added 250 px padding so the div is at the center of the 1400 box but 250 px is being added to the top location.
You can fix this by changing the box-sizing to border-box or increase the margin-top.