How do I remove the grey background around my picture?
Here's how the page looks right now: http://imgur.com/w52pfhn
.header {
text-align: center;
font-size: 50px;
font-family: sans-serif;
font-style: bold;
color: white;
background-color: white;
background-image: url("https://dummyimage.com/vga");
padding: 10%;
margin: 0%;
border: 0%;
}
body {
background-color: grey;
}
<div class="header">
<h1>Hello</h1>
</div>
By default the body has margin, so:
body {
margin: 0;
}
maybe try to remove the color of background?
background-color: grey;
Remove this snippet of code:
body {
background-color: grey;
}
Hope it helps!
Set the parent element 'height, width' same as that of the image, and set overflow: hidden; to that parent element, which will cut out the grey area.
Your background-image needs to fill perfectly the header to hide the grey background.
Try with :
.header {
background-size:100% auto;
}
or
.header {
background-size: cover; /* or contain */
}
Hope this helps
Related
I am trying to put a background picture below the header. The picture is supposed to cover all the width and height, but should not cover the header. However, the background picture does not show up. What’s wrong in my code?? Thank you for taking your time My codes are below;
Part of my html is below;
<body>
<header>
<p class="btn1"><img src="images/thumb2.jpg" class="skypic" alt="skypic"><span class="stext">picA</span></p>
<p class="btn2"><span class="king"><img src="images/king.png"></span><img src="images/B.jpg"></p>
</header>
<div id="wrapper" class="stampwrap">
</div>
</body>
and part of my css is below;
body{
font: 14px/1.6 sans-serif;
color:#313131;
background: #67b2e4;
}
header{
display: block;
overflow: hidden;
height: 80px;
background: #67b2e4;
padding: 2% 4%;
}
.btn1{
float:left;
}
.btn1 .stext {
font-size: 2rem;
font-weight: bold;
padding-left: 20px;
float:right;
margin-top: 20px;
}
.btn2{
float: right;
}
.skypic{
height: 80px;
width: auto;
}
#wrapper{
height: 100%;
width:100%;
background: url(images/zzz.jpg);
}
.stampwrap{
position: relative;
}
You need to define the height of the body element. the wrapper class has no space to be viewed. height:100%; cannot be seen in a parent body element with height:0px; which is the default if not defined.
I want to center text in my header, the header takes up 100% of the view height and 100% of the width and does only consist of a solid color. When i center the text (Hello) the header is "pushed" down leaving white space and i have no clue how to fix this.
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
}
#body {
margin: 0;
}
<header id="mainHeader">
<p id="hello">
<Hello>
</p>
</header>
(The text needs to be centered vertically when window is zoomed by default)
I made a jsfiddle and I saw the white box above the header. I added a margin-top: 0 to the css at #hello and it seems to work for me. Test it out!
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
margin-top: 0;
}
#body {
margin: 0;
}
EDIT:
To fix what he wanted to do I used the flex-property to allign the items in the middle of the header like this:
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
display: flex;
justify-content: center; (vertical center)
align-items: center; (horizontal center)
}
Maybe you can play with the padding-top property! Of course, I've deleted the margin top that the <p> adds by default...
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
padding-top: 100px;
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin: 0 auto;
text-align: center;
}
#body {
margin: 0;
}
The white space has nothing to do with centring text. That is the combination of the default margin-top that applies to paragraphs and collapsing margins.
Add margin-top: 0 to the rules for #hello.
I want an image to be displayed behind some text in an <h1> tag. But when I add the image it replaces the text and pushes the text below it.
Screenshots : Before and After
CSS
body {
background-color: #1a1a1a;
}
header,
h1 {
text-align: center;
font-family: CGF Locust Resistance;
font-size: 50px;
color: lightgray;
-webkit-text-stroke: 1.5px #000;
}
header {
margin: 0;
padding: 0;
height: 100px;
border-bottom: .5px solid #b3b3b3;
}
nav {
position: relative;
top: -5px;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
border-bottom: .5px solid #b3b3b3;
}
nav ul li {
display: inline;
color: #fff;
font-family: CGF Locust Resistance;
font-size: 12.5px;
padding: 20px;
}
.red {
color: red;
}
#omen {
z-index: -1;
}
Set the image as a background-image of header. Is that what you're after?
h1 {
background: url(the/filepath/to/your/image.jpg) no-repeat center 100px;
background-size: 400px auto;
}
That's approximately how you would use a background image in this situation. center 100px means horizontally centered and 100px from the top (in relation to the h1 element).
h1 {
position : abosolute;
}
This should do the trick but it is preferable to use ids instead of changeing the h tags everywhere on your side
Put this parameter to the image object in css (example creating custom classes) :
.image{
position: relative;
}
And this one to the text :
.text{
position: absolute;
}
Of course, you have to set this classes to it's respective objects. Hope it helps !
I have this image on my website, but when I zoom with the scroll, the image becomes blurred. So, what I need it is not resize when I zoom.
This is my CSS code:
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
The image must be repeated on the screen.
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
img{
max-width: 100%;
height: auto;
}
You might want to try something like this and see if it works.
The background color of the div is not showing up for the h1 and h3 content. What am I doing wrong? Thanks in advance!
CSS:
#header {
width: 100%;
height: 250px;
background: linear-gradient(#4C205C, #000000);
margin: -20px 0px 0px 0px;
overflow: hidden;
}
#header > h1 {
color: #FFFFFF;
text-align: center;
padding-top: 15px;
}
#header > h3 {
color: #FFFFFF;
text-align: center;
}
HTML:
<div id="header">
<h1>Hello world</h1>
<h3>Hello!</h3>
</div>
Demo
Your code works properly if you want to add background color for h1/h3 you need to specify css style for it.
#header > h3 {
color: #FFFFFF;
text-align: center;
background: red /* add this */
}
If you want to change the background color then you have to use background property not color property because color property changes the color of text inside that div.
your CSS should be like this :
#header {
width: 100%;
height: 250px;
background: linear-gradient(#4C205C, #000000);
margin: -20px 0px 0px 0px;
overflow: hidden;
}
#header h1{
background: #FFFFFF;
text-align: center;
padding-top: 15px;
}
#header h3{
background:#FFFFFF;
text-align: center;
}
Is this solves your problem if not comment..
Thank you!!