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.
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'm not a coder but have some basic knowledge and have been editing a template. The site is almost there - on desktop it looks fine but on mobile the cover image doesn't scale down.
I've tried changing the size from 100%, auto and cover, played with vw and vh etc, but still can't get anything to work.
Here's the CSS:
.intro {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: auto;
-o-background-size: auto;
}
If anyone can help that would be great! the site is adammillsmusic.com
Thanks!
For Responsive Images do the following in .intro class
intro {
max-width: 100%;
height: auto;
display:block;
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
background-size: contain;
-webkit-background-size: contain
}
Key changes
max-width: 100%;
height: auto;
display:block;
Hope this helps
You are prefixing properties different values :
-webkit-background-size: cover; : On webkit (Chrome & co), cover the background
background-size: auto; On other browsers, do not cover
This is probably why you see a covered background on your desktop and having unexpected results on a mobile browser.
body {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(//placecage.com/200/200) no-repeat center top;
background-color: #e5e5e5;
background-size: cover;
}
Set your max-width to 100% like this:
max-width: 100%;
Thanks for your help - this did solve the problem. Though now after seeing the result, I think maybe it would be wiser to call a smaller size image through the use of '#media' for the mobile site. The only problem is in my code editor when I try to do this it doesn't seem to recognise the '#media' tag and treats it like /* */
Any thoughts?! Thanks
#media screen and (max-width: 600px) {
.intro {background-color: #e5e5e5;
background: url(../img/Bg-mountain-small.png) no-repeat center top;
}
Finally got my main parallax image to scale on mobile with background-size: 100% auto, but now there's a large empty space after the image where the div isn't scaling down to mobile size. Please help! Here's the site.
css
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 100%;
width: 100%;
}
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center
}
background-attachment: fixed; does not tend to be supported by mobile browsers. In my experience it tends to cause some undesirable behaviour.
This might help: Background-attachment: fixed not working on android/mobile
In addition: I think the p tag is causing your problem. Inspecting the elements shows that the P tag is taking about 20-30px height. but has no content in it.
Is min-height more appropriate?
Or for that matter, is it even appropriate for me to be setting all of my fullscreen backgrounds to both html and body? Can this be set to html alone?
html, body {
height: 100%;
background-image: url(blah.jpg);
background-size: cover;
background-position: center center;
}
everything is drawn on body, html is the main document, if you can give styles but is not highly recommended because body and html in question are the same.
min-height is used whenever a screen this size that does not want.
*{
margin: 0;
padding: 0;
}
body {
background-image: url(blah.jpg);
background-attachment: fixed;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
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;
}