I have this site
https://preview.c9.io/pgonzalez/demo-project/html/test.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io
The logo at the top is an image, I'm using this technique
h1{
position:relative;
}
span{
width:100%;
height:100%;
position:absolute;
background-image:url(Images/headertext.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<h2>
<span></span>
The rainy season
</h2>
</header>
and it works as I expect. However, the same technique doesn't work here
https://demo-project-c9-pgonzalez.c9.io/html/API.html
You will see how the background image shows twice and in a completely different position, the code I'm using is the same
h1 {
position: relative;
}
span {
width: 100%;
height: 100%;
position: absolute;
background-image: url(Images/headertext.png);
background-repeat: no-repeat;
Can't figure out what is causing this. Thoughts?
It is because there is another span on the page.
You want:
h1 span {
width: 100%;
height: 100%;
position: absolute;
background-image: url(Images/headertext.png);
background-repeat: no-repeat;
}
And probably want to reference it more specific than that. You CSS will add that background to ANY span on the page. What I posted above will only affect spans that are children of h1 tags.
This is because one page header is defined as such, which doesn't work:
#headertest{
position:absolute;
width:100%;
height:100%;
background-image:url(../Images/developerstitle.png);
background-repeat:no-repeat;
}
And on the other page that this technique does works is defined as:
header{
color:white;
background-color:black;
padding:10px;
text-align:center;
background-image:url(Images/headerbackground.jpg);
background-attachment:fixed;
background-position:center;
}
My guess is that the Position statement must be changed/removed.
Related
My background image is not covering all contents on my page, rather it's applying only half of the screen.
The same code with same image is properly working on my another page.
Only the difference is that i have a lot of content on this page but i think that doesn't matter.
Where is the issue?
Thanks in advance.
html
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
css
#main {
position: relative;
}
#main:before {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: url(../..//images/3.jpg) center center fixed;
width: 100%;
height: 100%;
opacity : 0.2;
filter: alpha(opacity=20);
z-index: -1;
try this code
background-size:100% 100%;
Hi, you just try with following CSS snippets
background: url(../..//images/3.jpg);
background-repeat:no-repeat;
background-size:contain;
This method will work
body
{
margin:0px;
width: 100%;
height: 100%;
}
#main {
background-image: url('download.jpg');
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
Here you are using a psudeo element :before .The functionality of psudeo element :before is as follows.
It would attach a child node at the first index.In your case you are trying to attach an image before the div element.And this does not correspond to your whole body.
To make the image applicable to your whole body try this:
body
{
margin:0px;
width: 100%;
height: 100%;
background: url(../..//images/3.jpg) repeat left top;
}
And remove your psudeo element :before
#main {
position: relative;
/*Other CSS Properties*/
}
try this one
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
I guess you have missed a double quote while writing your ID.
<html>
<head>
</head>
<body>
<div id="main">
<!--Here i have multiple sections-->
</div>
</body>
</html>
I have a background-image that is 800x480 pixels. When my element has a fixed size I see the background-image, but not when the element has a relative size or a max-width.
Working CSS script
.audio-container, .settings-container {
max-width:800px;
height:480px;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
CSS script with no background image showing
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
What can I do to show the background-image yet have the element sizes relative to the browser window?
By request, here are the parent DIVs
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Here are the parent DIV CSS styles
.main-guy {
position:absolute;
/* Same result if width and height are set to a fixed number */
width: 100%;
height: 100%;
margin: auto;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
}
You have to change the position:absolute in .settings-container to position:relative as your image in this case act as a Child for .settings-container and the image should be according to its parent. So Position:absolute will not work.
Check the snippet
.main-guy {
position:absolute;
width: 100%;
height: 100%;
margin: auto;
background:#999;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
background-color:blue;
}
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
background-image:url(http://reservations.life/css/images/bg-01.jpg);
background-repeat: no-repeat;
background-size: cover;
position:absolute;
}
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Using the following HTML:
<div class="settings-container"></div>
With the following CSS:
html, body { height: 100%; margin: 0; padding: 0; }
.settings-container {
width: 100%;
height: 100%;
text-align: center;
background-image: URL("your-image-here");
background-repeat: no-repeat;
background-size: cover;
}
Results in a background taking up 100% of the width and height of the viewport. It's difficult to solve your question properly without seeing the whole picture, but my guess is that you will need to apply height somewhere else in your document.
You may also run into issues with using position: absolute, but again that largely depends on the broader picture of how you're applying this to your site/application/whatever.
I need to use an image of a hollow hexagon as a background for some content in my site. It kind of should look like this:
But I'm having all kinds of trouble laying out the content inside the hexagon.
So far I have this:
.hex-bg {
background-image: url('/images/diamond.png');
background-size: cover;
background-repeat: no-repeat;
min-height: 30px;
padding: 10px;
}
What would you guys think it's the best way to approach this scenario?
JSbin Demo
.hex-bg {
background-image: url('/images/diamond.png');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
min-height: 30px;
box-sizing:border-box;
padding: 20px;
width:250px;
height:290px;
text-align:center;
color:white;
font-size:14px;
}
.hex-bg img{
max-width:50px;
padding:20px;
}
.text-wrapper{
margin-top:10px;
}
As long as the text is not too long and doesn't spill out ofthe bottom of the hexagon it should work. In the case you need an exact wrap of the text you might want to consider another approach such as CSS Text Wrap
I would like to make a background image move as the use scrolls and it is normal to use
background-attachment:fixed;
But the issue is that it is stretching the image and I am not able to position it anymore.
http://jsfiddle.net/5c3b56a7/3/
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
}
.container2{
background-attachment:fixed;
}
You can see the issue better on full screen
http://jsfiddle.net/5c3b56a7/3/embedded/result/
First image is position center top
second one cannot be positioned due to the attachment.
Is there any way to do this?
Unfortunately you cannot use background-attachment: fixed and background-size: cover together.
When background-attachment: fixed determine background image to behave like position: fixed element, background-size: cover forced it to calculate background size relatively to the element itself.
Still you can use JavaScript to calculate background position in window.onscroll() event.
Maybe I misunderstood the problem. Here is my variants as I realized that I want to get a result.
http://jsfiddle.net/p507rg68/light/
HTML
<body class="container2">
<div class="container"></div>
<div class="push"></div>
</body>
CSS
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
}
.container2{
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
background-size:cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
}
.push{
margin-bottom:800px;
display: block;
width: 100%;
height:1px;
}
use background-size: to set the image size!
I'm trying to make a landing page with several different sections like chartbeat.com. I've done the following in my HTML:
<section class="payroll">
<p>
This is the Payroll Section
</p>
</section><!-- END class="payroll" -->
<section class="pos">
<p>
This is the Point of Sale Section
</p>
</section><!-- END class="pos" -->
and this is what my CSS looks like:
.payroll {
background-image: url('../img/payroll_bg.jpg');
background-repeat: repeat-x;
height: 100%;
}
.pos {
background-image: url('../img/pos_bg.jpg');
background-repeat: repeat-x;
height: 100%;
}
The problem is the sections are floating apart, leaving a large gap between them. See picture. If I shrink the window, or inspect element, the sections float up to overlap each other.
Any ideas? Thanks!
I think the problem is being caused by your 100% heights. You need to set a height on the parent element because any percentage dimensions are based on the size of it.
Moving away from percentages, like you have done, would also do the trick.
create a .wrapper div and use this:
.wrapper {
width:100%; /* you can define as you want */
height:100%; /* you can define as you want */
position:relative;
}
.payroll {
background-image: url('../img/payroll_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
width:0 auto;
}
.pos {
background-image: url('../img/pos_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
opacity:0.9;
width:0 auto;
}