I have a background image for the first section of my site that I need to touch the nav bar. The arm is the background image. It needs to touch the nav bar for the design.
background image
The first section starts with a header (h3) which has padding-top on it:
h3 {
font-size: 1.5em;
margin-top: 3em;
margin-bottom: 0.7em;
text-transform: uppercase; }
I need the background to "ignore" the padding so theres no gap between it and the navbar.
the CSS for the background image
.start {
background-image: url(../images/goldenarmamend.png);
background-position: top right;
height: 100%;
width: 100%;
Hope this makes sense!
remove background position...
.start {
background-image: url(../images/goldenarmamend.png);
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
}
set right value as per your need in pixel or em.
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 working on this site - http://agencymaiclientpages.com/phononic/cms/
One of the requirements is that footer goes to the bottom of the page. I know there are height:100% values on body and html required, but whichever combination I tried (there are several element within content area) - it just doesn't work. I tried putting all the main content into 100%, nothing, tried several elements within stack, still nothing. What am I doing wrong? Or perhaps, what am I missing?
I even tried to remove some of the elements (#primary) so the stacking isn't so "high", but the footer either goes below the screen (so scrolling is required) or stays just below the main content area.
You need fixed positioning. This will ensure your footer is at the bottom of the page:
.site-footer {
position:fixed;
bottom:0;
width:100%;
max-width:100%;
}
But be careful, if the window height is 'small', it will cut of the main content. So depending on your main content, you could only apply the fixed positioning after a certain vertical height, for example something like this:
#media (min-height:600px) {
/*fixed positioning here*/
}
Something like:
.site-footer {
color: #ddd;
font-size: 14px;
font-size: 1.4rem;
text-align: center;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -120px;
}
?
Your question needs more info...
The footer comes to the bottom.
CSS :
.site-footer {
bottom: 0;
position: absolute;
width: 100%;
left: 0;
right: 0;
font-size: 1.4rem;
text-align: center;
color: #ddd;
}
Remove padding and margins from some places so that all the main contents come in one page . for example:
.site-footer {
padding: 1em 0;
}
.menu-main-container {
margin-top: 30px;
}
p {
margin-bottom: 1.5em;
}
Because your footer doesnot have any background color so when main content div is bigger the footer overlaps it and doesn't look good.
Try this code, it will help :
.my_footer {
position : absolute;
bottom : 0px;
color: #0f0;
padding : 0 auto;
font-size: 16px;
font-size: 1.0rem;
text-align: center;
left: 50%;
}
The position: absolute; and bottom : 0px; will make the footer to be placed at the foo of the page.
I am trying to display fixed footer at the bottom of the screen for mobile browsers. I have tried putting position: fixed in the Footer id. However, it is still not working correctly. How can I set the footer to continuously display as the user scrolls down the page?
#footer {
color: #333333;
font-size: 70%;
font-style: italic;
text-align: center;
padding: 0;
position: fixed;
}
Do it like this:
#footer {
color: #333333;
font-size: 70%;
font-style: italic;
text-align: center;
padding: 0;
position: fixed;
bottom: 0px;
width: 100%;
}
The 'bottom: 0px' will fix the footer to the bottom of the screen, and the 'width: 100%' will center the footer contents. You will have to add a background color as well so that your page content does not show through the footer.
Plus, as #Adrift said, remove the extra closing div tag from the footer area.
I am trying to duplicate this style of a sidebar menu with the background image, but when I use the same stylesheet code and image, it doesnt span the entire height of the sidebar.
The example: http://demo.ponjoh.com/Simpla-Admin/index.html
The css used (on example site and mine):
#sidebar {
background: url("../images/bg-sidebar.gif") no-repeat scroll left top transparent;
color: #888888;
font-size: 11px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 230px;
}
On my site, the image only displays in its actual dimensions (230x197) and doesnt fill the sidebar. What am I missing?
The person who coded that CSS implemented the background image of the sidebar twice. Once in the body and once inside the sidebar.
body {
font-family: Arial, Helvetica, sans-serif;
color: #555;
background: #F0F0F0 url('../images/bg-body.gif') top left repeat-y;
/* sets bg image of sidebar, and #F0F0F0 for the rest */
font-size: 12px;
}
Here's what you're missing though:
background: url("../images/bg-sidebar.gif") repeat-y top left;
If the background image is a repeatable image... change no-repeat to repeat or vertically repeat-y
You would have to add a bottom: 0; as well as position: relative; to the #body-wrapper and activating the background-repeat. But be warned! This is a very dirty CSS coding method and will probably lead to misunderstandings and failures - still it works.
#body-wrapper {
/* Your code stuff ... */
position: relative; /* absolute positionings are 'relative' to their first 'position: relative;' parent */
}
#sidebar {
width: 230px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: url("../images/bg-sidebar.gif") repeat-y scroll left top transparent;
color: #888888;
font-size: 11px;
}