In my angular project I have following task to do.
This is just a design template, not my actual code.
So far I have made the right picture by having a div and setting the background image.
But now I dont know how to put a dark layer on the page (like on the left side). The logic is no problem, but I dont know how to achieve it with CSS.
How do I do it?
You can do this really simply let's suppose you have a div and you can style according to following rules, you can also replace with your element id or css class with div:
div{
position:relative;
}
div:after {
position: absolute;
background: rgba(0,0,0,0.3);
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can put a div over your image and style it the way you want it to.
If you make it black and put opacity on the element, it will get more transparent, which makes it look like its a little darker
Note that you will have to have the z-index set accordingly for it to work.
example:
overflow: hidden;
height: 100%;
z-index: 2;
Alternative you could try to add a shadow with background: linear-gradient()
example:
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
Related
I want to display some random design images on my sites background as background-image, problem now is that every time I place such an image it somehow interacts with nearby boxes etc.
I just want my design images (small icons etc) to be part of the background without getting in touch with other non-design elements like text, boxes etc.
Something like that I guess:
body {
min-height: 100vh;
position: relative;
height: auto;
width: auto;
background-image: url("/static/pattern.jpg");
background-repeat: repeat;
z-index: -10;
} -> "The actual background of the site"
.design_element_01 {
position: relative;
z-index: -1;
background-image: url("/static/xyz.png");
max-width: 100px;
} -> "The design element that should get placed onto the body background from above"
Try:
.design_element_01 {
position: absolute
/*...*/
}
In addition, you might need to change max-width to width, since a background doesn't provide width to the element.
Centering the Background
There are a few different approaches to centering the background. I'll outline one here; if it doesn't work for you, I can describe others.
Essentially, the idea is to make the .design_element_01 element itself take up the entire page. Then, background-size can be used to constrain the size of the background, and background-position can be used to center it. A basic example would be:
.design_element_01 {
position: absolute;
top: 0;
left: 0;
background: url("/static/xyz.png");
width: 100%;
height: 100%;
/* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
(Do note that I haven't tested this; you may need to tweak it.)
If you test this example, however, you will notice that this centers the background on the screen, but not necessarily the entire page. This may or may not be what you want. If not, you can change the <body> element's position property:
body {
position: relative;
}
This should cause the .design_element_01 element to be positioned relative to the <body> element.
I also created a JSFiddle example to demonstrate the solution: https://jsfiddle.net/mouqewzv/.
Finally, if you don't want your element completely centered, but just offset from the center, you could tweak the left and top properties of design_element_01 to position the background initially at the center, but then offset it.
Try setting your design_element_01 position to absolute NOT relative
and then try to place it however you want using
left:
right:
top:
bottom:
z-index:
Hope this works!
I'm trying to learn HTML and CSS at the moment, and i am doing myself a site.
I used for the background picture
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
and i want to make a div opaque in order to add some photos on it.
For the rest of the divs in the site i used
background-color: black;
opacity: 0.8;
The problem is that when using opacity: 1; on the div which should contain the photos, the div dissapears (it appears for a split second behind the main background image).
I understand that opacity transfers from parent to child divs but i had just deleted all classes and made each div transparent by pasting those 2 lines of code and the div which i need with opacity: 1; still disappears under the background.
Any ideas? Thank you.
I would suggest using rgba colors to make things opaque, or you can use opaque pictures (pngs for example).
You would use rgba like this:
background: rgba(0,0,0,0.5);
the 0.5 says how much opaque it will be, the 0,0,0 is black - change that to any color you want.
I'm trying to build a website header that is semi transparent, and contains a semi transparent image that hangs outside the of the header div, like in the image linked below.
Because of overlapping opacities, I can't simply put a semi transparent image in to a semi transparent div and add a negative margin to the image. The best I could come up with was taking the height of the header image, and cutting that bit of the logo image, like in image attached. However that's not ideal, as doesn't play nice responsively etc etc.
Any ideas of how I might achieve this look?
Thanks in advance.
If you know the height of your menu then you can place both the logo and the menu inside of a container. Then position the logo with the top value equalling the height of the menu.
.header-bg {
background: rgba(225, 225, 225, 0.5);
position: relative;
height: 60px;
}
.header-bg .logo {
width: 90px;
height: 90px;
background: rgba(225, 225, 225, 0.5);
position: absolute;
top: 60px;
left: 10%;
}
See this fiddle: http://jsfiddle.net/3kxBt/1/
Hope that helps in some way.
This is an interesting problem and there are a couple ways to solve it; two come immediately to my mind.
The first is your method; carefully position things so that you don't have multiple translucent sections overlapping. This wouldn't be too difficult; if you go with this method I would recommend breaking the header into sections left and right of the image and using absolute positioning.
The second and easier way is to create a version of the picture with the semi-transparent white overlay you desire already applied. Then you can use that as the background for the menu and image. The only tricky thing here is you have to make sure the images line up by either using fixed positioning or calculated pixel offsets. This approach has been around for a long time and you can see any early example (2001-ish) of it here.
My take on it is to create a :before pseudo-element. It has its problems, including what if the logo changes in size at some point, but overall it works.
HTML
<a class="logo" href="#">
<img src="https://example.com/logo.png" />
</a>
CSS
nav a.logo {
position: relative;
...
display: inline-block;
line-height: 0.0001em;
font-size: 0.0001em;
}
nav a.logo img {
position: relative; /* for z-index issues. giving the image a relative
position automatically will place it above the
absolutely positioned :before element. This is
because the before element is rendered before the
image */
}
nav a.logo:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 71px;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.4);
...
}
Demo: http://jsfiddle.net/ZP6LQ/1/show
Source: http://jsfiddle.net/ZP6LQ/1/
You can use rgba color format for background of both the .logo and the header to achieve your desired effect. However, you have to give position: absolute; to your .logo class because it needs to come right below the header. If you put your .logo on top of your header, then colors will overlap and won't look right. So, it needs to starts at the bottom of the header.
The header should have position: relative; so that your .logo is positioned relatively to the header. This way, you don't even need to know the height of your header because when you define top position of your .logo, you can simply use top: 100% so that it always starts right below your header. You don't have to hardcode that top value.
Now, you need to shift your actual logo (image) inside your .logo on top because its appearing below the header right now. For that you can simply push the image by giving it negative margin-top value.
SEE THE DEMO
The code would look like this:
HTML
<header>
<h1 class="logo">
<img src="/image/path" alt="logo">
</h1>
</header>
CSS
header {
background: rgba(255,255,255, 0.7);
position: relative;
}
.logo {
position: absolute;
top: 100%;
background: rgba(255,255,255, 0.7);
}
.logo img {
margin-top: -50px;
}
I've been trying to place an image over a div, my div is
.my_box{
position: relative;
left: 200px;
width: 200px;
height: 200px;
background-color: white;
opacity: 0.7;
}
and then my image is
.asvp{
position:relative;
left: 300px;
top: 100px;
}
When I do this is puts the image under the div, what do i do in order to place it over the div? I know to put the image into the div but that will but the opacity onto the image which I dont want.
Try adding z-index:1 to .my_box and z-index: 10 to .asvp. Hard to peg without the HTML code though. If this doesn't work, please create a jsFiddle and I'll sort you out. :)
You should also use margins instead of left and top. For example, on .asvp remove left and top and put margin: 100px 0 0 300px;. As a general rule of thumb, I only use left, right, top, bottom on absolute elements.
why dont you give your image position:absolute; instead... that would automatically put it ontop of it
Instead of repositioning, you can keep the image inside the div without its opacity effecting its contents. If it's a solid semi-transparent background like in your example, you could use rgba value on the div like this:
background-color: rgba(255,255,255,0.7);
This and other options here:
https://stackoverflow.com/a/6780462/2909501
i have created a website but now i am having 1 issue. i am unable to do click even on link and navigation.
you can take a look:
http://www.cambridgekitty.com/business-directory/
to check the real codes.
HTML
<div id="main-bg">
<div id="left-side-logo"></div>
</div>
CSS
#wrap {
padding: 0;
position: relative;
width: 100%;
}
#main-bg {
background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
margin: 0 auto;
min-height: 733px;
position: relative;
width: 100%;
z-index: -9999;
}
just add a logo on left side
#left-side-logo {
background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
height: 500px;
left: -150px;
opacity: 0.8;
position: absolute;
top: -60px;
width: 500px;
z-index: -1;
}
and add
position: relative;
to #wrap. and add
z-index: -9999;
to #main-bg.
but after doing this ... i am unable to click on logo or even navigation links.
please let me know why i am casusing this issue.
thank you
Don't use a negative z-index if you don't know exactly what you're doing. Use a positive value and just set #left-side-logo's z-index to a value even higher.
Since #wrap has a negative z-index, it's placed behind the content of #inner-wrapper in the latter's stacking index.
See also:
W3C: CSS2.1: 9 Visual formatting model (Section z-index)
If I were you, I would simple change the elements I apply the different background images to. Give #inner-wrapper the city image background, and #main-bg the logo background. Then use the background-position property to position the logo background (currently the two zeroes in your background rule). Also, if you want opacity for that logo you can achieve that by simply setting it in Photoshop or whatever editor you prefer.
This solution means you don't have to deal with the z-index issues and makes for more hack-free and semantic mark-up, although you do have a few containers. Hope this helps :)