I have been trying to update my site and have been having extreme difficulty with implementing an image into the site background.
I tried to create two divs, one for each side (as I want the output to be image1 - lets call it leftbg.png then content in the middle, followed by image2 - lets call it rightbg.png on the right).
So I have put the divs in the body as so:
<body>
<div id="leftbg">
<div id="rightbg">
content
</div>
</div>
</body>
And in the css file I have:
#leftbg {
float: left;
width: 22.5% (body is 55%);
background: url(images/leftbg.png) no-repeat;
z-index: 999
}
However this is not producing anything. I think it might be because my body code includes a background already, and I have tried to put z-indexes, such that my leftbg class would be dominant over the body class, however I am aware z-indexes have many problems.
This is the body css code:
body {
font:11px "Trebuchet MS", Arial, sans-serif;
color:#666;
background:maroon url(image/backgrd.png);
z-index: 0;
}
Any help would be greatly appreciated!
Try to set a height to #leftbg. Example:
#leftbg {
float: left;
height: 80px;
width: 22.5%;
background: url(images/leftbg.png) no-repeat;
z-index: 999
}
I suggest restructuring your HTML like this:
<div class="bgs">
<div class="bg left"></div>
<div class="bg right"></div>
</div>
<div class="fake-body">
<h1>Hello World!!!!!!!!!!!!!</h1>
</div>
Then you can do something like this with your CSS:
.bgs{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: green;
}
.bg{
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.bg.left{
left: 0;
background-color: red;
}
.bg.right{
right: 0;
background-color: blue;
}
.fake-body{
position: absolute;
top: 0;
left: 0;
}
I think that's pretty clean. Feel free to replace the red and blue background colors with your desired background images.
JSFiddle
Related
Hello I need to position an image as in the example. Theoretically it looks like it is positioned over 2 seperate boxes with different background colors, that is the goal, but practically it is not possible, at least for me. How to solve the problem?
Usually you'd do this with flex and vertical alignment, but since you want specifically the image to be between boxes i'd say absolute is the way to go here
.card {
display: block;
margin-left: 80px; /* image width + 20px */
}
.header, .image-container {
display: block;
margin: 0;
}
.header h1 {
margin: 0;
}
.image-container {
height: 1px;
position: relative;
}
.image-container .image {
display; inlnie-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: purple;
position: absolute;
top: -50%;
left: -10px;
transform: translateY(-50%) translateX(-100%);
}
<div class="card">
<div class="header">
<h1>Header</h1>
</div>
<div class="image-container">
<div class="image"></div>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
</div>
The simplest solution will be using a combination of an of z-index and position:absolute.
*A small suggestion if you may encounter the problem: you must use z-index with specifying the position (position: static will not work)
img {
width: 100px;
height: 100px;
z-index: 99;
position: absolute;
}
div {
background-color: black;
z-index: 1;
width: 200px;
height: 100px;
position: absolute;
top: 10px;
left: 5px;
}
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png'>
<div></div>
I have a weird shape svg that I cannot edit, is there a way to rotate and crop a piece of it and use it as a background image with CSS? It doesn't necessarily have to be a background image as long as its location stays intact on mobile.
This is my code:
<section id="alert">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="text-center">Get scholarship alerts by providing your info:</h4>
<form class="" action="index.html" method="post">
</form>
</div>
</div>
</div>
and this is my CSS:
#alert .container {
padding-top: 4em;
padding-bottom: 4em;
}
#alert {
background-color: #004976;
color: #fff;
min-height: 400px;
position: relative;
}
#alert::after {
position: absolute;
content: '';
background-image: url(https://svgshare.com/i/SN2.svg);
width: 60px;
height: 100%;
right: 0;
top: 0;
}
With this Pseudo element it looks okay but it doesn't look like the mockup.
This is how it looks with my code:
And this is the mockup and how it should look:
This is the actual SVG file: https://svgshare.com/i/SN2.svg
Hello this is what I got, I think this is what you want to achieve?
No change was made in the HTML, the CSS changed like this:
#alert .container {
padding-top: 4em;
padding-bottom: 4em;
}
#alert {
background-color: #004976;
color: #fff;
min-height: 400px;
position: relative;
overflow: hidden;
}
#alert::after {
position: absolute;
content: '';
background-image: url(https://svgshare.com/i/SN2.svg);
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
width: 100vh;
height: 60px;
right: 0;
bottom: 0;
transform-origin: bottom right;
transform: scaleY(-1) rotate(-90deg);
}
Basically I rotated and flipped the after pseudo-element and played around with the background (I would imagine a shorthand can be used there)
I also added overflow: hidden; to make sure the SVG doesn't go outside the container
You can check out my solution here: https://jsfiddle.net/h7k2eosx/5/
Note that this can present issues depending on the screen size but this should be enough to get you going I hope :)
If your design allows it you could position the after pseudo-element with a fixed position, that would work nicely :)
( like here: https://jsfiddle.net/Ltamj8r6/ )
Here is my html code:
<div class="header">
<div class="headerBanner">
<img src="img/NewTopBanner.jpg" width="885" height="190" border="0" />
</div>
</div>
Here is my CSS:
.header {
position: relative;
background:url('img/header/CRC_Website_TopBannerLeftStretch.jpg'),url("img/header/CRC_Website_TopBannerRightStretch.jpg");
background-position:left, right;
background-size:50% 100%;
background-repeat:no-repeat;
}
.headerBanner {
width: 885px;
}
This is my HTMl and css code.
it works, but this two background images stretches to middle. I want this two images(left,right) not stretched and repeat to middle of the page.
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
Try this one, (not tested). It may be help you.
I feel like this should be an easy answer but cant figure out how to achieve this effect.
Essentially i'm trying to do this: http://demo.smooththemes.com/theone/
one this site, when you start scrolling the image stays fixed and the content scrolls over top. Any ideas?
Thanks for you help.
example
http://jsfiddle.net/gvMLS/
HTML
<div id="header">
</div>
<div id="content">
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</div>
CSS
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #ff0000;
}
#content {
position: absolute;
top: 20px;
bottom: 20px;
width: 100%;
background-color:#fff;
overflow: auto;
}
I have been asked to create a layout that incorporates this watermark. It must be placed in such a way that the left point is in the left sidebar DIV, the top portion is transparent to the banner image, and the bottom portion is a background image to the content DIV.
I tried absolute positioning in CSS per my jsFiddle here:
<!doctype html>
<div id="all">
<div id=leftside>
</div><!-- leftside -->
<div id="banner">
</div> <!-- banner -->
<div id="rightside">
<div id="rightinner">
<h3>My Account</h3>
<input type="text" id="Login"/>
<input name="Go" type="button" id="btnLogin" value="Go"/><br/>
</div>
<!-- rightinner -->
</div><!-- rightside -->
<div id="nav">
<ul>
<li>menu item1</li>
<li>Strategy & Performance</li>
<li>Documents</li>
<li>Research & Insights</li>
<li>Contact</li>
</ul>
</div><!-- nav -->
<div id="content">
</div><!-- content -->
<div id="footer">
<div id="leftfooter">
© my copyright
</div><!-- leftfooter -->
<div id="rightfooter">
Privacy Notice
</div><!
</div>
<!-- footer -->
</div>
<!-- all -->
However, absolute positioning doesn't allow me to properly fit the pieces of the watermark together tightly enough. This is an example slice where the watermark is sliced as part of the header image.
I've attached a mockup of what the completed home page should look like:
What would be the most CSS friendly and responsive approach to ensure that the watermark DIV is transparent over the top of the background color and can be seen in the banner, left sidebar and content DIVs?
UPDATE 4/1: I've modified the CSS here as follows:
#charset "utf-8";
/* CSS Document */
body{
background-color: #003a63;
font-family: Calibri, Verdana, sans-serif;
font-size: 12pt;
width: 100%
}
html{
width:100%;
}
h3{
color: white;
}
#all {
width: 1024px;
}
#banner {
background-image: url(images/banner.png);
background-repeat: no-repeat;
height: 367px;
width: 815px;
position: absolute;
left: 232px;
top: 0px;
z-index: 999;
}
#watermarkCont{
background-color: #003a63;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 25;
}
#watermark{
background-image: url(images/ghwatermark.png);
width: 576px;
height: 517px;
position: absolute;
left: 50%;
margin-left: -200px;
z-index: 25;
}
#content {
background-image: url(../images/bgcontent.png);
background-repeat: no-repeat;
height: 454px;
width: 827px;
position: absolute;
left: 228px;
top: 412px;
background-color: #FFF;
z-index: 1;
}
#leftside {
height: 895px;
width: 220px;
position: absolute;
z-index: 1;
}
#rightside {
background-color: light-gray;
height: 957px;
width: 211px;
position: absolute;
left: 1050px;
top: 0px;
z-index: -25;
}
#nav {
background-color: #c7940d;
list-style-type: none;
font: Calibri;
font-size: 12pt;
font-weight: bold;
position: absolute;
left: 231px;
top: 368px;
width: 822px;
height: 42px;
margin: 0;
padding: 0;
z-index: 999;
}
#nav ul{
margin:0;
padding:0;
}
#nav ul li{
display: inline;
font-weight: bold;
color: #FFF;
}
#rightinner {
background-color: #003a63;
height: 130px;
width: 220px;
padding: 1px 1px 1px 1px;
}
#footer {
height: 105px;
wiedth: 833px;
position: absolute;
left: 227px;
top: 864px;
width: 825px;
color: #003a63;
background-image: url(images/footerbg.png);
}
#rightfooter {
float: right;
}
#leftfooter {
float: left;
width: 225px;
}
This is closer to what I need. However, I'm not sure how to adjust the z-index values for the elemetns in question to make it look like the mockup. Can anyone provide some suggested values? My understanding is that the higher the z-index value, the higher the image is in the "stack". Is that correct?
This is my suggestion:
Give your body and html a width of 100%.
Make a new Div that would be called something like watermark container and give it a width of 100% with position absolute.
Inside that div, make another called watermark and give it a position absolute, but then you can give it a left:50% and then a negative left-margin to place it in the exact point you want it.
This will ensure that the watermark is always placed in the right spot regardless of the screen size.
Here's the code:
body, html {
width:100%;
}
#watermarkCont {
width:100%;
height:100%; //or if you want to just make this a px amount, it might not take 100% height
position:absolute;
top:0;
}
#watermark {
background-image:url("/*image*/");
width: /*whatever the image width is*/;
height: /*whatever the image height is*/;
position:absolute;
left:50%;
margin-left:-200px;
}
This approach is usually used for centering absolutely positioned elements. The negative left margin is usually half of the width of the element, but in this case, you will be pushing to the left more, so make it a bigger negative number if needed.
After you have it placed, give each element the correct z-index and your large watermark should be able to fit in place without having to be cut up.
background-image: url(/Content/Images/logo.png);
background-repeat: no-repeat;
height: 560px;/* height of page */
background-position: 50% 50%;
background-size: 300px 300px; /* width height of Image */
padding: 16px; /* as per need */