logo_area
{
background-color: #d9e670;
filter:alpha(opacity=25);
opacity:0.25;
}
and another div:
#logo_image
{
background: url(../images/logo.png) no-repeat center 50%;
}
<div id="logo_area">
<div id="logo_image"></div>
</div>
Of course, logo_image is transparent too. Could I make it untrensparent in transparent block?
I don't think so. I am not sure if it's possible to bring it to 100% transparent if the container isn't.
However, what you can do is put it outside the block, such as:
<div id="logo_image"></div>
<div id="logo_area">
</div>
Then on the logo image block, add:
#logo_area
{
position: absolute;
height: x;
width: y;
}
So it should sit on top of the logo area div, but not be part of it. You may need to set the height of the logo area though, as the logo image will not cause it to stretch.
Related
I am trying to set background of the div as an image and it is set but the image is not appearing correctly i.e. it goes all the way down instead of being exactly set inside the div. How do I do this?
<div class="swiper-slide swiper-latest-products mat-elevation-z2"
style="background-image: url('${headerImagePath}'); background-size:contain;
height: 20%;
width: 100%;
padding-top: 66,64%;"
onclick="window.loadDataClicked(${viewSubjectData});">
<span class="sectionRole-name">${
subject.SectionRole.NameAr
}</span>
<div class="top-products-image ${
subject.SectionRole.Id == SectionRoleType.Readings
? "qarah-with-catgory-image"
: ""
}"></div>
<div class="top-products-title-container">
<div class="top-products-title float-right">${title}</div>
</div>
</div>
I tried setting background size and no-repeat but didn't work. How do I make it appear exactly fit inside the div?
background-size: cover; should work for you. This will clip the image if it is larger than the viewport so you can also center it exactly by using background-image: url(path-to-image) 50% 50%; or background: url(path-to-image) 50% 50%;
I am hoping one of you can help. I have a problem that with googling and checking the forums I have not been able to solve.
I would like to create a landing page that has a tall bg image that extends to 100% width and adjusts to the browser window + the dynamic height of the content. All the content should be below the boundary of the browser window so its just the image that can be seen when the browser first loads up and you scroll down to the content which sits over the bottom part of the extended image.
My HTML currently is:
<body>
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
</body>
And my CSS is currently:
html,
body {
height:100%;
width:100%;
}
#sectionOne {
height:100%;
background-image: url(../images/cliff.jpg);
background-size: cover;
}
#sectionOneLanding {
height:100%;
width:100%;
}
At the moment, the image crops to 100% browser height and when you scroll down the additional content sits over a white bg instead of the remainder of the image. I believe this is due to the #sectionOne height being 100% but when I set it to higher than 100% it pushes my content further down but still on a white bg. Changing Background-Size to 100% also didn't work. It reacted the same as using cover.
Any ideas? Is there a handy CSS trick?
Apologies if this doesn't make clear sense. Ask any questions you need to as its hard to describe.
You need to use positioning for this case.
html, body {
height: 100%;
margin: 0;
}
#sectionOne {
position: relative;
height: 100%;
background-image: url(../images/cliff.jpg);
background-size: cover;
background-color: #99f;
}
#sectionOneLanding {
height:100%;
width:100%;
}
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
You don't need width: 100%. But you need margin: 0; as there are default margins. I have added a background colour so that you can clearly see the background spanning fully leaving the content in the next page.
If you need both the image and the content to be in the same page, the you need to use Flex Box.
FlexBox Example
body, html {
height: 100%;
margin: 0;
}
#sectionOne {
display: flex;
flex-direction: column;
height: 100%;
}
#sectionOneLanding {
background-color: #99f;
flex: 1;
}
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
Preview
I'm a beginner and I tried to make one page by myself, however, the result is not good. I will try to explain what I need: Full-screen page with two images, one image will cover 50% of horizontal space of browser window, and second image will be on right side covering the rest of this page. I need both images to be responsive and to always keep 100% height. When the window is resized, left and right sides of both images will be cropped.
Very similar to this: http://www.gt3themes.com/website-templates/soho/striped_landing.html
Is this difficult to make? I tried to follow some guides on the web, but the result was that my images were stretched and not cropped. Maybe I am completely wrong and I need to create two columns and then put images inside?
I will appreciate any help.
My current code is:
.photo{
size: 100%;
position: relative;
overflow: hidden;
}
.photo img{
max-width: 50%;
height: 100%;
}
The site you linked more or less did something like this:
http://jsfiddle.net/xnLn6s5o/
HTML
<div id="container">
<div id="left" class="halfwidthcontainer">
<div id="left-image" class="image"></div>
</div>
<div id="right" class="halfwidthcontainer">
<div id="right-image" class="image"></div>
</div>
</div>
CSS
html, body, #container, #left, #right, #left-image, #right-image {
height:100%;
}
.halfwidthcontainer {
float: left;
width: 50%;
}
.image {
background-size: container;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#left-image {
background-color: red;
background-image: url('');
}
#right-image {
background-color: blue;
background-image: url('');
}
The general idea is that two containers sit side by side, floated (see this answer as why to use floats to position containers side by side instead of inline-block).
The idea thereafter is to explot the CSS background property which will allow you to get the overflow/positioning effects you want. You can read more about that here.
You're going to want to fill in the background-image properties of the #left-image and #right-image IDs to add the images you want.
How can I add a repeated css background with an padding/space on top.
Here is my HTML Structure.
<div class="flare">
<div class="clouds">
<div class="clouds_bottom">
<div class="header">
contents
</div>
<div class="content_body_wrapper">
contents
</div>
<div class="footer">
contents
</div>
</div>
</div>
</div>
and my css code that is not working.
.clouds_bottom {
background: url('../img/clouds_bottom_bg.png') repeat left 250px;
}
Cheating is allowed with CSS. Instead of placing you background 100% away from top cover it with another div with original background [color].
html:
<html>
<body>
<div id="cheated_background">
</div>
<div id="body">
content
</div>
</body>
<html>
css:
body {
background: lightblue; /* your clouds :) */
}
#cheated_background {
position: absolute;
top: 0px;
background: white;
width: 100%;
height: 100px;
}
#body {
position: relative;
}
Check out live example.
Try using repeat-x instead of repeat? If it is repeated vertically, you will not be able to see the margin created by the background-position.
Edit to comment: If you need the repeat in both directions, what I could think of is a three-layer structure. You would need a container div with position:relative into which you could put three divs having position:absolute. The bottom one would have the repeated background picture, the middle one would be white and cover the top portion of the bottom one only, the top one would contain your actual content.
I have a query based on the following CSS and HTML code (see below).
I have a background image that spans the whole browser page (left to right), which is not what I'm after.
How can I get the background image to stay within the boundaries of my main content canvas, i.e. centered 850x600px and anything outside just be white?
body {
background-color: #ffffff;
margin:0px;
padding:0px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
}
#main {
width:850px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;
}
<body>
<div id="main">
<img src="images/female_model.jpg" id="female_model" alt="" />
<div id="colwrap1">
<img src="images/nav_bar.jpg" id="nav_bar" alt="" />
<img src="images/site_name.jpg" id="site_name" alt="" />
</div>
</div>
</body>
If you want to attach the background to the main DIV, then specify the background there. It sounds like you want the background to be centered horizontally (background-position: 50%;) but repeat for the vertical extent of the main DIV (background-repeat: repeat-y;).
body {
background-color: white;
margin: 0px;
padding: 0px;
}
#main {
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: 50%;
// rest as before ...
width: 850px;
...
}
<div id="main">
Lorem ipsum dolor sit amet, ...
If your background image does not appear it could be because the image is inaccessible or the main DIV has no height--that could happen if female_model and colwrap1 both float.
How about you just put the background image on your #main?
Dominic is correct. Move the background properties from body to the main div and you should have what you need.
If I have understood your question correctly, you want to set the page background to white and have the background of your main div be whatever image you set it to - correct?
If so, setting body to:
body
{
background:#fff;
}
should do the trick.
Now, I also noticed that the image you want to use has a smaller width than your div.
So you will want main to have the following properties:
#main
{
background-image:url(myimage.jpg);
background-position:top;
background-repeat:repeat-x; <!-- you need this as your image is < than the div width -->
}
That should do the trick. If it still doesnt work, perhaps you want to share the page link on your server. Its possible that we have misunderstood your question.