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>
Related
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>
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/
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;
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 following markup
<body>
<div class="holder">
<div class="circle"></div>
</div>
</body>
and i have applied a fixed background to body element and white background applied to class holder
body {
background: url(image.png);
background-attachment: fixed;
}
.holder {
width: 500px;
height: 500px;
background: #fff;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
}
what i have tried to do is to make the circle transparent to see the body background. Simply, what i am trying is, making the circle transparent to see the body background image while the white background around the circle still exist. please excuse my English. Guys please help me.
What you are asking to do will not work using transparency.
However, there is a work around that is quite acceptable:
body {
background: url(http://placekitten.com/g/400/500);
background-attachment: fixed;
}
.holder {
width: 500px;
height: 700px;
background: rgba(255,255,255,0.8);
border: 1px dotted blue;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: url(http://placekitten.com/g/400/500);
background-attachment: fixed;
}
see demo at: http://jsfiddle.net/audetwebdesign/FqMXz/
Just apply the same background image to the .circle div.
This trick is taken from one of the CSS books by Eric Meyer.
The 4th number in rgba() is the alpha transparency. You've set it to 0, which is completely transparent. 1 would be completely opaque. You need to set that to some value between 0 and 1.
That said, if you are trying to create the effect of a hole, then what you need to do is create a background image that is white and has a transparent circle cut in it and make that the background to .holder. It doesn't matter how transparent you make .circle if .holder is completely opaque!
may be you should try it by adding opacity: value attribute or by setting its background-color: rgba(0,0,0,value)
Value must be between 0 to 1.
I'm about to just make 5 divs with 1 in the center all inside of a parent. Parent is transparent and your circle would be too. Surrounded on all 4 sides with ::before & ::after elements that aren't transparent to tighten up the seams... hope that helps.