I tried to do an animated div with background-image and after some attempts the "url(../pic1.jpg);" part is not giving the picture witch is added to project. On VS Code it works fine, and after I put any URL to picture for example from google it also works. What is wrong?
Code Here:
<style>
.huge-ball {
position: absolute;
height: 300px;
width: 300px;
border-radius: 100%;
z-index: 5;
}
.left-bottom {
left: -60px;
bottom: -60px;
background-image: url('../pic1.jpg');
}
.right-bottom {
right: -60px;
bottom: -60px;
}
</style>
<div>
<div>
<div class="left-bottom huge-ball">
</div>
<div class="right-bottom huge-ball">
</div>
</div>
</div>
background-image: url('../pic1.jpg');
Depending on where the image is relative to the compiled stylesheet, the path in the url() bit will need to change. If the image is in the same folder as the stylesheet, then the style would just be the below.
background-image: url('pic1.jpg');
It may be helpful to understand relative/absolute paths if that is the issue here.
Related
What I'm trying to create is a div that cuts into two other divs (one above, and one below, see picture below)
First I had no idea how to create a shape like that in css until I discovered clip path: polygon. Now I can sort of get the shape going when using a shape generator, but the problem is I can't get the div to cut into the other places. I tried to use a z-index but that didn't work.
I know I can use a negative margin to move the div more into the hero image but the polygon doesn't come out right.
Here is JSFiddle I tried to add a snippet but was giving me too many issues, figured this would be easier and cleaner to see.
The HTML/CSS in particular is this:
<section class="ThreeSteps">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4">
<h2>Decide</h2>
<p>Pick</p>
</div>
<div class="col-lg-4">
<h2>Fundraise</h2>
<p>We</p>
</div>
<div class="col-lg-4">
<h2>Celebrate</h2>
<p>Give</p>
</div>
</div>
</div>
</div>
</section>
.ThreeSteps {
margin-top: -20px;
background-color: #0066CC;
-webkit-clip-path: polygon(0px 325px,1689px 491px,1688px -466px,1px 82px);
clip-path: polygon(0px 325px,1689px 491px,1688px -466px,1px 82px);
z-index: 1;
}
Anyone have any suggestions on what I should do? Thank you for your time.
I've seen that Clip Path just creates a mask on images. I think a better approach should be you create a pseudo-class :before and :after; positioning them absolute to the .ThreeSteps div.
something like this:
.ThreeSteps {
position: relative;
/*Other Stuffs*/
}
.ThreeSteps::before {
content: '';
width: 100%;
height: 100px;
display: block;
position: absolute;
top: -115px;
left: 0;
background: url('my-triangle-image-top.svg') no-repeat;
background-size: contain;
z-index: 2000;
}
.ThreeSteps::after {
content: '';
width: 100%;
height: 100px;
display: block;
position: absolute;
top: 0;
bottom: -115px;
background: url('my-triangle-image-bottom.svg') no-repeat;
background-size: contain;
z-index: 2000;
}
If you can use some Vector Image Editor (Like Adobe Illustrator), you can save a triangle image as 'my-triangle-image.svg', and use as a background image on pseudo-classes :before and :after . If you cant, just use a .png image, but svg is the best for this purpose.
I would like to put some image to the top and right of the text... I made an example in Photoshop so you may see what I had in mind....
Image example
I am using a WordPress theme, and I cannot figure out how to place this image to the top right corner... yes, I did search the google but I didnt find any suitable solution.
I tried as a background image of a div, but the image cannot go beyond the confines of a div...
I tried putting img tag, but it pushes the text to the left ... but I need the text to go over the image to create the desired effect
Thank you in advance.
This is what I did:
img {
width: 400px;
height: 400px;
position: absolute;
right:0;
top:0;
}
div {
position: absolute;
left: 0;
top: 150px;
background-color: white;
width: 80%;
}
Here is the JSFiddle demo
add in css
body{
background-image:url("your image path");
background-position: right top;
background-repeat:no-repeat;background-attachment:fixed;
}
Fiddle
.example {
height: 100px;
width: 100px;
position: absolute;
right: 0px;
bottom: 0px;
top: 20px;
}
<div class="example">
<p>Text example</p>
</div>
Add class to the image i.e
.toprightcorner{ position:absolute; top:0; right:0; }
after applying the css . Hope it works out. If n't let me know.
I am trying to place icons for mobile web app using css.
However I am having some problem with this.
I set outer box and placed icon there which I thought would be good for different devices since they have different size
Below is my code but I am not seeing the icons
Am I missing anything here?
This is my html
<link rel="stylesheet" type="text/css" href="/mobile_pages/main/main_page.css"/>
<br>
<div id="siteMenu">
</div>
This is my css
#siteMenu{
position: relative;
width: device-width;
height: device-height;
}
.icon{
background-size: cover;
width: 80px;
height: 80px;
}
#intro_icon{
position: absolute;
background-image: url('intro_icon.png');
top: 50px;
left: 0px;
}
#direction_icon{
position: absolute;
background-image: url('direction_icon.png');
top: 50px;
left: 90px;
}
#pic_icon{
position: absolute;
background-image: url('pic_icon.png');
top: 50px;
left: 180px;
}
when I give specific px for width and height in #siteMenu, I can see the icon.
However, I want it to be device width and device height.
I tried 100%, auto value for width and height but still didn't work.
what should I do here?
Just tried your code in jsFiddle, with google logo, it is working fine.
Can you make sure the path of your icons is right, so in the same folder as your CSS?
Make sure the ccs file is well referenced, and the < link> tag must be in the < head> tag of your page?
#intro_icon{
position: absolute;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png');
top: 50px;
left: 0px;
}
for device-width and device-height, they are media-query parameters not css attributes. Also you need to set up html and body tag full page :
html{
width: 100%;
height: 100%;
}
body{
min-height:100%;
padding:0px;margin:0px;
}
#siteMenu{
position: relative;
width: 100%;
height: 100%;
height: 100vh;
min-height:100%;
}
JsFiddle, Note that vh is not supported by all browsers (e.g IE8)
I'm creating a website which is white, so I dont have any background assigned. But I want to add some blue gradient details on two parts of the website. #bg_top would be placed on the top to the left and #bg_bottom should be placed on the bottom to the right. Of course this is not working exactly the way I want...
This is how its displayed on my html:
<body>
<div id="bg_top"></div>
<div id="wrapper">
</div>
<div id="bg_bottom">
</div>
<footer>
</footer>
The #bg_top works perfectly. It does display itself behind the wrapper but the bg_bottom is giving me the problem as its well placed, but its visually between the wrapper and the footer. Therefore I used z-index but its also not working. Also the strange thing is that the bottom and left parametres dont make any difference. This is the CSS code:
#wrapper{
width: 925px;
height: 1355px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#bg_top{
width: 500px;
height: 500px;
position: absolute;
top: 0px;
left: 0px;
background-image: url('../_img/2_body/bg/bg_top.jpg');
z-index: -1;
}
#bg_bottom{
width: 500px;
height: 500px;
position: relative;
float: right;
bottom: 0px;
right: 0px;
background-image: url('../_img/2_body/bg/bg_under.jpg');
z-index: -1;
}
Could somebody help me? I've tried everything...
thank you
The problem is you are not wrapping the bg_top and bg_bottom inside the wrapper. It works perfectly when you do it.Please find the fiddle I used
http://jsfiddle.net/meetravi/sL5jm/
Good Luck !
With position: relative, if you want it visually inside the wrapper, you need to put the HTML inside the wrapper.
I already got to my answer... I needed the pictures to be behind the wrapper. The bottom picture sticked to the top right part of the footer and the top picture at the same level than the header. Thanks to the input I saw it was very simple...
<body>
<header>
<div id="bg_top"></div>
</header>
<div id="wrapper"></div>
<footer>
<div id="bg_bottom"></div>
</footer>
</body>
So after I applied absolute position and a z-index and picture as backgound done... behind the wrapper and in its place. This was the final CSS code:
#bg_top{
width: 500px;
height: 500px;
position: absolute;
top: 0px;
left: 0px;
background-image: url('../_img/2_body/bg/bg_top.jpg');
z-index: -1;
}
#bg_bottom{
width: 500px;
height: 500px;
position: absolute;
background-image: url('../_img/2_body/bg/bg_under.jpg');
bottom: 155px;
Any other doubts maybe I can help...
right: 0px;
z-index: -1;
}
So I have a problem that I think is quite common but I have yet to find a good solution for. I want to make an overlay div cover the ENTIRE page... NOT just the viewport. I don't understand why this is so hard to do... I've tried setting body, html heights to 100% etc but that isn't working. Here is what I have so far:
<html>
<head>
<style type="text/css">
.OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
body { height: 100%; }
html { height: 100%; }
</style>
</head>
<body>
<div style="height: 100%; width: 100%; position: relative;">
<div style="height: 100px; width: 300px; background-color: Red;">
</div>
<div style="height: 230px; width: 9000px; background-color: Green;">
</div>
<div style="height: 900px; width: 200px; background-color: Blue;"></div>
<div class="OverLay">TestTest!</div>
</div>
</body>
</html>
I'd also be open to a solution in JavaScript if one exists, but I'd much rather just be using some simple CSS.
The viewport is all that matters, but you likely want the entire website to stay darkened even while scrolling. For this, you want to use position:fixed instead of position:absolute. Fixed will keep the element static on the screen as you scroll, giving the impression that the entire body is darkened.
Example: http://jsbin.com/okabo3/edit
div.fadeMe {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
<body>
<div class="fadeMe"></div>
<p>A bunch of content here...</p>
</body>
body:before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
First of all, I think you've misunderstood what the viewport is. The viewport is the area a browser uses to render web pages, and you cannot in any way build your web sites to override this area in any way.
Secondly, it seems that the reason that your overlay-div won't cover the entire viewport is because you have to remove all margins on BODY and HTML.
Try adding this at the top of your stylesheet - it resets all margins and paddings on all elements. Makes further development easier:
* { margin: 0; padding: 0; }
Edit:
I just understood your question better. Position: fixed; will probably work out for you, as Jonathan Sampson have written.
I had quite a bit of trouble as I didn't want to FIX the overlay in place as I wanted the info inside the overlay to be scrollable over the text. I used:
<html style="height=100%">
<body style="position:relative">
<div id="my-awesome-overlay"
style="position:absolute;
height:100%;
width:100%;
display: block">
[epic content here]
</div>
</body>
</html>
Of course the div in the middle needs some content and probably a transparent grey background but I'm sure you get the gist!
I looked at Nate Barr's answer above, which you seemed to like. It doesn't seem very different from the simpler
html {background-color: grey}