When I open the HTML file the background img is centered but after uploading the files to Wordpress the background is centered to the right of the screen. I'm at a lost for what the problem could be.
here's the code
body {
line-height: 1;
background:url(images/shopbg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 80%;
background-position: center center;
background-color: black;
Your styling is applied to the <body> tag and when you are uploading your file you probably have other css files with classes on the <body>. You could create a specific class for your element and apply the styling there.
try create div and put the image and add a class to manage the image, or you need to see the image type background???
Related
I'm trying to set a texture background to a container div. My CSS is below:
.container {
background-image: url(..img/texture-one.png) repeat;
}
My problem is, the image isn't showing up. If I make an img tag in my HTML, the image shows up using the same path.
.container {
background-image: url("img/texture-one.png");
background-repeat: repeat-y;
}
background-image can have only image path.
background-image: url|none|initial|inherit;
background is shorthand for multiple background properties.
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
So you need:
.container {
background: url(..img/texture-one.png) repeat;
}
Perhaps just add quotes around image link?
.container {
background-image: url("img/texture-one.png");
}
Can you show the HTML code too?
If you have floated elements inside the container, then the height of the container is 0, so you can't see a thing. In this case, you should use overflow: auto; on the container.
http://www.hamdenway.co.uk/portfoliojavascript.html
I am building a website portfolio for applying for apprenticeships. I made a generator with JavaScript which prints out results in a list through output.innerHTML.
It all works fine but when it prints off the page, the background image cuts off. I want the background image to continue repeating for the new content.
In Brackets in my stylesheet I am hovering over body {} and it doesn't update the height for the newly generated content. I thought it would do this as:
body {
background-image:url('../portfolioimages/yellowbg.jpg');
background-repeat: repeat;
background-size: auto;
height: 100%;
padding-top: 100px;
margin:0px;
}
So result is this horrible cut-off of the background image. If you need any more code please ask.
Remove height:100% from body css. Just open the console of browser and remove the height to test it
body {
background-image:url('../portfolioimages/yellowbg.jpg');
background-repeat: repeat;
background-size: auto;
padding-top: 100px;
margin:0px;
}
How can I set a background image which is not scrolling along with the content. I'm using jquery mobile and phonegap. I try to use background-attachment: fixed but the image is not going in fullscreen.
<div data-role="page" class="background">
</div>
My css:
.background {
background-image: url(../images/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: 100% 100%;
}
I had to tackle this problem, the work around (as far as I am aware it hasn't changed in iOS7) is to create a separate div (call it the "background" div), set its position to fixed and insert your desired background image inside this div.
Set the z-index of this div so that it sits underneath the rest of your content.
iOS webview will respect fixed positioned divs but not background-attachment: fixed;
Set the background once, inside the <body> of your html file(s) but outside your subsequent pages.
Here's how I did it and it worked really well.
<div class="background"><img src="img/Background_Dark.png" width="100%"/></div>
and the css
.background {
position: fixed;
top: 0%;
left: 0%;
min-width: 100%;
z-index: -10000;
}
First, you need to cut out half of the CSS. Start with this:
.background {
background-image: url(../images/bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
}
Notice that I changed background-attachment: scroll; to background-attachment: fixed;. The default value of background-attachment is scroll, so you don't need to include it anyway, but that does the opposite of what you are trying to do.
Second, can you upload the bg.png to imgur or some other site so that we can have a better example of what you're trying to do? And also fill in your div with some sample content of similar length to your actual content? Since this is a div and not the body of your website, the div is collapsed unless there is content inside, and the div will grow to fill the content.
This means if you set background-size: 100% 100%; you will be stretching the image as far as the content of the div; which isn't what you want. You only want the background image to fill the viewport. Setting background-attachment: fixed; accomplishes this.
You can use iscroll plugin.
Page in jquery mobile executed by java script source code and in some of the elements changing in css not works.
I'm trying to create a simple meteor project based on the leaderboard example in their site. I want to add a small icon next to the score of each player. For doing so I created a folder named public and put test.png image there. In the css of .player .score I added the image as a background-image and not it looks like this
.player .score {
background-image: url('test.png');
display: inline-block;
width: 100px;
text-align: right;
font-size: 2em;
font-weight: bold;
color: #777;
}
When I deploy the project the image appears blank. The url for the image is not broken because if I use inspect element with chrome browser and go to resources I can see that the image was loaded.
Two things.
1) Keep in mind that for the leaderboard example, adding a background to the .player .score descendent selector will place the image underneath the score, rather than next to it. To place the image next to the score, add an empty span to the player template:
<template name="player">
<div class="player {{selected}}">
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
<span class="icon"></span>
</div>
</template>
2) You need to add a size to the span as well as to the background image. In your css, style the span for your image separately:
.icon{
background-image: url('test.png');
background-size: 40px 40px;
background-repeat:no-repeat;
width: 40px;
height: 40px;
display: inline-block;
}
For an image placed at the root of the public directory, the above results in this:
I had similar problem in my meteor "leaderboard" project with background image(local file) for page body.
The solution was to create a folder with name "public" inside my project and to put background image into it. This way background will become reachable by meteor http://localhost:3000/bg.jpg
After that I was able to use it in my CSS code as usual:
body {
background: url(bg.jpg) no-repeat fixed;
}
Don't forget the height value:
height: 30px;
When you use a background image in CSS the image doesn't consume space. You have to explitly tell the div how big it should be. Especially when there is nothing in it. However big you want it use that as the height, I've just put up 30px.
Update: I've double checked this is working: here is a screenshot:
I've seen this trick on many websites and I want to make it for a project of my own.
I have an image background.jpg that is VERY BIG, just to be ready for any screen size.
I wish to center the background image to the visitor's window.
I mean, while scrolling the window content will move but the background will stay in place - centered vertically and horizontally.
BTW most of the viewers will have old crappy PC's so it'd better not flicker, if it'll be JS.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
put your image on the body background:
body{ background-image:url('your/image/url'); }
and put a div within the body:
<body><div class="div-body">{your site's contents}</div></body>
and create a css selector like this:
.div-body{
overflow:scroll;
width: 100%;
height: 100%;
display: block;
float: left;
}
try what is in this fiddle: http://jsfiddle.net/maniator/3RRYe/3/ demo
see if that works for ya ^_^