I met some problem in designing HTML and CSS. the picture that i make it on one of the divide class and the width is not full. For an example the picture is not fully fix in there and there will have some white blank in the left and right side.
.background1 {
margin: 0;
padding: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background1.jpg);
height: 80vh;
max-width: 2250px;
background-size: cover;
background-position: center;
}
<div class="background1">
<h1>Description</h1>
<h2>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
</div>
body tag has its own margin
you can do this:
body {
margin :0;
}
Related
An issue I'm amazed I couldn't solve on my own. I can not seem to remove the standard white background from any text added to my page. I have tried being broad and making the body and p tags transparent as well as being specific with classes. No luck.
The white text background at the bottom
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.backgroundImage {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(desk1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
}
body {
background: transparent;
background-color: transparent;
}
p {
background: transparent;
background-color: transparent;
}
.divText {
background: transparent;
background-color: transparent;
}
.text1 {
font-size: 40px;
background: transparent;
background-color: transparent;
}
<div class="backgroundImage"></div>
<div class="divText">
<p class="text1">
many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
</p>
</div>
If what you really want is to put the writing on top of the image, you can try this structure in your HTML, because there is actually no background there, it's just situated below the image. To position the text well over the image, you can try using flex-box.
*{
margin: 0;
padding: 0;
font-family: sans-serif;}
.backgroundImage{
background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url(desk1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;}
body {
background: transparent;
background-color: transparent;
}
.text1{
font-size: 40px;
}
<html>
<head>
<title>This is a title</title>
<link rel="stylesheet" href="luxStyle1.css">
</head>
<body>
<div class="backgroundImage">
<p class="text1">
many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
</p>
</div>
</body>
Source of this problem comes from the div with backgroundImage class, it is placed before the divText, and there are a few solutions that I can thing of right now:
Delete background image and place css code of it to .divText so the divText has that background (this is what my snippet shows, i also deleted extra lines that specify transparency, you don't need to necessarily delete them, I just wanted to get rid of it since there is no use for it anymore)
Same as number one but place the .backgroundImage class data to body so the whole page has the same background, No.1 solution affects the background of divText
Use position absolute to put .divText to inside of the .backgroundImage
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.backgroundImage {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(desk1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
}
.divText {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(desk1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.text1 {
font-size: 40px;
}
<div class="divText">
<p class="text1">
many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
</p>
</div>
The background is transparent already because the body default background color is white, so to fix that just put the text inside the div with the backgound image like this:
<div class="backgroundImage">
<div class="divText">
<p class="text1">
many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
</p>
</div>
</div>
I'm having an issue with my background image stretching beyond the screen resolution, but it seems to only happen on mobile landscape mode. Here is my css code;
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("assets/brickBackground.png");
background-repeat: repeat-x;
}
<div id="my-thing"></div>
The idea is that there is an image that is transitioned by a gradient into a solid background color. It works well on desktop and mobile, but not for landscape mode. The gradient fills the screen, but the image stretches beyond that when a scroll-y is introduced. I figure this is because of the image height, but I'm not sure how to do that properly without affecting the gradient or stretching the image normally. Media query? I'm not too sure.
I'm somewhat new to css so I apologize and do appreciate any help. Thank you.
New snippet with an image from: https://stackoverflow.com/a/19209651/125981
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("https://i.stack.imgur.com/aH5zB.jpg");
background-repeat: repeat-x;
}
<div id="my-thing"></div>
Try background-size: cover; Just one thing though. You are using repeat-x so are you sure the image is larger than it should be or is it simply repeating horizontally?
Try
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%,
rgba(10, 0, 0, 1) 80%), url("https://i.stack.imgur.com/aH5zB.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Suddenly background is not visible in my Chrome. I am able to set only background color but not background image. Why is this happening suddenly?
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/smile.jpg");
height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
margin: 0 auto;
}
Try to replace address of image in background-image as following manner -
("../images/smile.jpg")
I have the following website:
www.thewhozoo.com
It works fine on a desk top, but for some reason on a mobile device's browser, it has a grey bar down the side.
I have the following code:
css
body {
background-color: #4B5961;
width: 100%;
margin: 0;
}
.top-container {
float: left;
width: 100%;
background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html
<body>
<div id="image-head" class="top-container">
The grey line down the side is the same as the background color of the body (#4B5961).
As you can see, I have the body width and the background image width both set at 100%. So I would not expect to see the grey line. I think it is a result of the scroll bar.
If anyone can advise how I can remove this, I would appreciate the help.
Check your style this css rule, take out the padding-left: 10px;:
.wz-title {
color: #B2D137;
font-weight: bold;
/* padding-left: 10px; */
font-size: 110%;
text-shadow: 0px 0px 10px rgba(0,0,0,0.7), 0px 0px 1px rgba(0,0,0,0.4);
}
Remove the padding with .wz-title. For some reason, removing padding fixes it.
.wz-title {
padding-left: 0;
}
Here:
Set overflow-x:hidden; on your body, that'll fix it:
body {
overflow-x:hidden;
}
Try this:
body, body * {
box-sizing: border-box;
}
By using above code you will never face any problem with padding ever. :)
Im doing the following in css:
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/back.jpg') no-repeat fixed center;
i want to stretch the image to 100% 100%, how should i do so?
Use background-size: 100% 100%;.
Alternatively:
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/back.jpg') no-repeat fixed center / 100% 100%;
try
background-size:100% 100% // or cover
From what I know, you cannot stretch an image in background with CSS.
To start, you can use more accurate CCS:
body {
background-image: url('../img/back.jpg');
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.75);
}
But the picture will not stretch with this.
An other possibility than CSS, is to use a cell of a table with a picture, in a div that is set to background:
<div class=background>
<table width=100%><TR><TR>
<img src="../img/back.jpg" width=100%></TR>
</TR></TR></table>
</div>
And in CSS, you have to create layers with different z-index:
div.background {
z-index: -1;
position: fixed;
left: 0px;
top: 0px;
float: top;}
div.notbackground {
z-index: 0;
position: absolute;
left: 0px;}
the rest of your page should be placed in the "notbackground" div to appear in higher layer, so the picture is really on background. z-index=0 is higher than z-index=-1 (you ca use any numbers). This way your picture will appear as a background.
It's possible that some advanced CSS do the trick but after a quick search on Google I still don't know.