This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 8 years ago.
i waited for 7 days to ask this question because i can't ask more question,
i want to keep the wrapper in the middle when people re-size the page
header {
background-image: url("http://lorempixel.com/400/200");
background-size: 100% 100%;
height: 100px;
}
#home {
position:absolute;
top:10px;
left:400px;
}
<header>
<img id="home" src="https://cdn2.iconfinder.com/data/icons/snipicons/5000/home-128.png" alt="home" style="width:75px;height:67px">
</header>
thnx
You could simply add text-align: center to the parent element. The img will respect this because it is inline by default.
Updated Example
header {
background-image: url("http://lorempixel.com/400/200");
background-size: 100% 100%;
height: 100px;
text-align: center;
}
See this answer for alternative approaches.
That should do it, if all you need is keeping the icon centred all the time you don't really need to absolute position it.
header {
background-image: url("http://lorempixel.com/400/200");
background-size: 100% 100%;
height: 100px;
text-align: center;
}
#home {
margin-top: 10px;
}
try this,
#home {
position:absolute;
top:10px;
left:48%;
}
Related
This question already has an answer here:
How to have both position fixed and background-attachment fixed?
(1 answer)
Closed 2 years ago.
I have a parent div which is holding links called #linkHolder. I have its position:fixed. The links have a background which have a background-attachment: fixed to give it that nice background effect. Those two things seem to cancel each other out. Is there a way around this issue?
#linkHolder {
display: block;
position: fixed;
top: 0;
width: 100%;
}
ul {
list-style-type: none;
overflow: hidden;
background-color: #1b242f;
text-align: right;
font-size: 22px;
width: 100%;
font-family: "Sansita Swashed";
}
ul li {
display: inline-block;
padding-right: 6%;
}
#homeLink {
background-image: url("/static/portfolioBackground/linkBackA.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
<div id="linkHolder">
<ul>
<li><a id="homeLink" href="/">Home</a></li>
<li><a id="aboutLink" href="/about">About</a></li>
<li><a id="serviceLink" href="service">Services</a></li>
</ul>
</div>
Here's the issue on codepen I am having.
https://codepen.io/webdev154676/pen/VwjNoRN
Here's what I would like to have with the background image, but with the #linkHolder as position fixed, it will not work. Please help, and thank you for your time.
https://codepen.io/webdev154676/pen/rNLgBVv
From your question I'm understanding that the issue is that the background image is a little more blurred than what you would like to have.
For that i sudjest you to try using the background-size attribute and play around with it giving some sizes in % like
#homeLink{
background-size:90% 100%;
}
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 3 years ago.
Hi I have <div class="jumbotron text-center"><nav>something</nav></div> this line of code and the jumbotron has some CSS effects something like
.jumbotron{
background: url("image-url") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-size: cover;
height: 78vh;
filter: brightness(50%);
}
but all I want is only the jumbotron's background image gets the CSS effects, not the nav tag. currently, the nav tag inherits thefilter: brigtness (50%), is there anyway only the background-image gets the effect?
No, it's not possible. A filter will affect current element with all its contents (including children).
Therefore the way to go here is to move <nav> outside of .jumbotron, wrap them in a common relative parent and render <nav> above .jumbotron.
Proof of concept:
.relative {
position: relative;
}
.relative > .absolute {
position: absolute;
width: 100%;
top: 0;
/* making it visible */
background-color: rgba(255,255,255,.25);
border-bottom: 1px solid white;
color: white;
padding: 1rem;
box-sizing: border-box;
}
.jumbotron{
background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover;
height: 78vh;
filter: brightness(50%);
}
<div class="relative">
<div class="jumbotron"></div>
<nav class="absolute">something</nav>
</div>
Feel free to rename the classes and adjust to your particular needs.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm not an html/css guy but the guy who usually does this quit so it fell into my lap.
I have a page where there is a background image to fill the entire page. I found some sample css online to do this:
html {
background: url(background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
What I want to do now is overlay some text on this such that it appears at the centered at the bottom of the page (not right at the bottom, maybe 50 px up from bottom). I tried a bunch of things but can't seem to get it quite right.
Depending on what your goal is you can use a combination of position: absolute and set the bottom and left attribute, like so:
body {
background: skyblue;
}
.footer-text {
display: block; /* just so IE will correctly render it */
position: absolute;
z-index: 1000;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
}
<footer class="footer-text">footer text</footer>
html:
<body>
<div class="bottomme">
<p>I'm some text at the bottom of the page</p>
</div>
</body>
css:
html
{
background: url(https://astrobioloblog.files.wordpress.com/2011/10/duck-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
font-size:16px;
}
body
{
width:100%;
height:100vh;
margin:0;
border:1px solid red;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.bottomme
{
font-size:3rem;
line-height:1.25em;
color:white;
text-align:center;
margin-bottom:1em;
border:1px solid blue;
}
background-position: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
push div to bottom of page: https://codepen.io/carolmckayau/pen/bmaOyK
Without knowing the code, my suggestion would be to add the text in it's own tag (e.g. a p-tag <p>your text here</p> ) and then position the text with
position: absolute;
bottom: 50%; /* Depending on how low/high you want the text */
left: 50%;
transform: translate(-50%, -50%);
W3schools.com has a great example on this right here: https://www.w3schools.com/howto/howto_css_image_text.asp
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 4 years ago.
I am having a problem with my webpage that I am in the prosses of making. Here is the W3schools link to what I am trying to make.
There's some sort of border around the edges of my webpage. Here is my CSS code:
#easyBreakfast {
color: #60542d;
font-size: 40px;
}
#head {
background-color: brown;
}
#p1 {
font-size: 20px;
margin: 8px;
}
body, html {
height: 100%;
}
.parallax {
background-image: url("https://i.pinimg.com/originals/4a/67/3b/4a673bea73e5130d5fb58e5904c76465.png");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#toast {
background-image: url("http://a57.foxnews.com/images.foxnews.com/content/fox-news/food-drink/2017/12/12/internet-is-divided-over-right-way-to-cut-toast/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1513113018403.jpg?ve=1&tl=1&text=big-top-image");
height: 100%;
}
#toast, .parallax {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Here is my HTML code regarding this problem:
<h1 id="easyBreakfast">Easy Breakfasts</h1>
<p id="p1">You know when you wake up late in the morning and only have <em>15 minuites</em> to get ready? Sometimes making breakfast can be a <strong>pain.</strong> These recipes are quick and don't need attention while cooking so you can do your other important things while your breakfast is brewing.
</p>
</div>
<div class="parallax"></div>
<h2 class="fooditem">Toast</h2>
<p>Just plain old toast... Spread jam, Peanut butter, Nutella, or any other topping you can think of on top of this simple breakfast. </p>
<button id="toastIng"> Ingredients </button>
<div id="toast"></div>`
I have tried turning outline and border off, but I just can't seem to find a solution.
If you need any more information, just ask. Thanks in advance!
You've got a margin on your body.
body {
margin: 0;
}
I am attempting to make the header/menu bar on this website static (fixed) so that it is always present at the top of the screen, and a particularly long website scrolls 'behind' it. I have accomplished this before on fixed width websites, but this website is fluid width and I have not been able to accomplish this yet without breaking the header.
Could someone potentially tell me where/what I need to edit in my CSS? I believe I need to add a position:fixed; element somewhere, perhaps in this section, but it doesn't seem to accomplish my goal in the same way as on a fixed width website.
.art-header
{
margin:0 auto;
background-repeat: no-repeat;
height: 170px;
position:relative;
background-image: url('images/header.jpg');
background-position: center top;
}
.custom-responsive .art-header
{
background-image: url('images/header.jpg');
background-position: center top;
}
.default-responsive .art-header,
.default-responsive #art-header-bg
{
background-image: url('images/header.jpg');
background-position: center center;
background-size: cover;
}
.art-header-inner{
position: relative;
min-width: 840px;
max-width: 1920px;
width: 50%;
z-index: auto !important;
margin: 0 auto;
}
try this, merge your .art-header & .art-nav inside a div, and class fixed to it like this
<div class="fixed">
//div .art-header & nav .art-nav here
</div>
then add the css for fixed
.fixed {
position: fixed;
z-index: 100;
}
and make some margin for .art-sheet
margin-top: 241px; /*the height of the fixed div*/
here's the JSFIDDLE