In my CSS layout I have given dimension and background color to div and i wanted to paste image over it but due to some reason after doing that the div box is collapsing.
HTML
<div class="box"></div>
CSS
body {
background-color: #534;
}
div {
display: block;
max-width: 1000px;
height: 500px;
margin: 20px auto;
background-color: #fff;
}
.box {
background: url('img/mike.png') no-repeat center;
}
background overrides background-color too. use background-image instead. Use this:
.box {
background-image: url('img/mike.png');
background-repeat: no-repeat;
background-position: center;
}
jsFiddle
The <div> is not actually collapsing, just removing the background-color as background overrides it.
Try using this for the background CSS declaration:
background: #534 url('img/mike.png') no-repeat center;
Related
I have made a Login page with the HTML file as follows
<div style =" height : 100vh; background-image: url(../../assets/login-bg-1.jpg); margin:0;
padding:0; background-repeat: no-repeat; background-size:cover; background-position: center;
width: auto;">
------
--
</div>
Now I want the background image to take up the whole screen but still vertical scroll shows and it's not hidden
I tried
overflow-y: hidden too.
The scroll hides only two conditions
1. When I type height:97vh;
2. When I type margin:-8px the background image disappears and scroll hides.
I don't understand it.
try width:100% and height:100% .
Put height as 100% instead of 100vh and don't put inline styles, it is a bad practice.
height: 100%;
Update:
Add margin:0 to the body, as it has default margin.
Will this do?
body {
margin: 0;
height: 100vh;
background-image: url(https://www.fillmurray.com/600/500);
background-repeat: no-repeat;
background-size: cover;
display: grid;
place-items: center;
}
.login {
color: white;
padding: 2rem;
border: 2px solid white;
}
<div class="login">
Log in here
</div>
Good evening,
I'm very new to html and was searching for a solution but I did not found any. So what I'm trying to do is to fix the background and put something like a panel over it, where I do the rest of the site like text etc. I have an example website: https://420cheats.com
I don't know if I am right but I think I have to add a second class and put this somehow over the background
Thanks in advance.
Ps: I did the background as a class in the css file.
You can just set a fixed background-image on your body element. Both the <body> and <html> tag need a set height of 100% for this to work.
body, html {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://cdn.cnn.com/cnnnext/dam/assets/170407220921-07-iconic-mountains-pitons-restricted.jpg');
height: 100%;
background-attachment: fixed;
}
.content {
background-color: rgba(204,204,204,0.5);
width: 80%;
margin: 20px auto 20px auto; /* top right bottom left */
height: 1500px; /* remove this, just here to show that it works */
}
<div class="content">
<h1>Content</h1>
</div>
You will need to set the background as fixed and create a DOM element to lay on top of your background image.
body {
background: url('https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1507062474/hotel-everest-namche-nepal-mountain-lodge-MOUNTAIN1017.jpg?itok=g-S4SL9n') no-repeat fixed;
background-size: cover;
}
div {
padding: 20px;
width: 400px;
height: 1200px;
background: rgba(0,0,0,.5);
}
<div>test</div>
my code in css is:
.logo{
content:url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png/600x600);
background-color: White;
float: right;
}
and in html I have:
<div class="logo"></div>
Am I missing something, nothing appears?`
Your question is somewhat general. You could also simulate the right positioning using positioning property on the image and not on the div.
.logo{
width: 250px;
height: 75px;
background-image: url("http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg");
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
float: right;
}
<div class="logo"></div>
First of all, the "content" property is used for :before and :after pseudo-elements. Second, the link to the image is incorrect. I assume that you want the picture inside the div .logo with a white background so here is a jsfiddle: https://jsfiddle.net/Iulius90/njne5sy5/
code:
.logo {
background: white url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png) no-repeat center;
background-size: cover;
float: right;
width: 200px;
height: 200px;
}
Using web-tiki's responsive square grid lay-out's I have made some responsive squares with background images and text on it as follows:
HTML:
<div class="square bg imgautumn1">
<div class="content">
<div class="table">
<div class="table-cell months">
VISIBLE TEXT
</div>
</div>
</div>
</div>
CSS:
.square {
float: left;
position: relative;
margin: 0.25%;
width: 50%;
padding-bottom : 50%; /* = width for a 1:1 aspect ratio */
background-color: #1E1E1E;
overflow: hidden;
}
.content {
position: absolute;
height: 90%; /* = 100% - 2*5% padding */
width: 90%; /* = 100% - 2*5% padding */
padding: 5%;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.months {
font-size: 40px;
font-weight: 900;
}
.imgautumn1:before {
background-color: black;
}
/* For responsive images as background */
.bg:before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
content:'';
position:absolute;
top:0;left:0;
right:0;bottom:0;
}
.bg{color: #fff;}
/*CHANGE OPACITY ON HOVER*/
.bg:hover:before{opacity:0.2;}
Now I am trying to only make the background transparent, not the text.
While using the opacity: 0.3 property on the imgautumn1 CSS-class the image becomes transparent, but also the text in it. Other techniques like the one from this SO-answer with using a separate div for the background, or a technique with using the :after element from here for the background plus opacity make the positioning of the background go wrong (i.e., image not centred) and I find it hard to implement. Another possibility might be to place a transparent div square on top of the image, but I don't think that is possible with the background-image property.
I hope someone here can provide me with some help on how to only make the background transparent and not the text.
JSFiddle: http://jsfiddle.net/L7m5psrm/
Seems to work fine if you use the :after/:before solution (setting the image as the background)
You just need to make sure you apply the same background properties.
.imgautumn1:before {
background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/* For responsive images as background */
.bg:before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
content:'';
position:absolute;
top:0;left:0;
right:0;bottom:0;
}
Demo at http://jsfiddle.net/L7m5psrm/2/
I have designed a webpage in PSD and I am in the middle of converting it. Within my main content I have a solid background colour but I have a glow effect on a separate layer which appears on top of the background colour.
I have a container that contains all the code, I have a header, main and footer. Within the main, I have added the solid background colour and also added the background image of the glow which I sliced from PSD. However, the solid background colour doesnt appear to show and it just shows the glow effect. Images below show what it looks like and what it should look like:
CSS:
Html {
background: white;
}
#container {
width: 955px;
height: 900px;
margin: 0px auto 0px auto;
}
#main{
background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;
height: 900px;
width: 955px;
}
You can use multi-background:
#main {
width: 900px;
height: 955px;
background: url(../images/slogan.png) no-repeat, #282d37;
}
To explain: use background css option, first add image, than background color.
LIVE DEMO
The problem is your styles are overriding each other. You need to put the background-color first, and use background-image instead of background. Declare all the values in their own properties so the background property doesn't override the background-color one.
#main{
background-color: #282d37;
background-image: url(../images/slogan.png);
background-position: left top;
background-repeat: no-repeat;
height: 900px;
width: 955px;
}
Try replacing
background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;
With
background: #282d37 url(../images/slogan.png) no-repeat top left;
A way to do this is wrapping the #main element with a wrapper where you set the background color, then set the opacity matching it (if needed)
#mainwrapper{
background-color: red;
height:100px;
width:100px;
}
#main{
background: url(http://www.w3schools.com/css/klematis.jpg) repeat;
opacity: 0.6;
filter:alpha(opacity=60);
height:100px;
width:100px;
}
<div id="mainwrapper">
<div id="main">
</div>
</div>