Is there a way of having a resizable dynamic background image in css such as.
#mainPage {
width: 100%;
height: 100%;
font-size: 3vw;
text-transform: uppercase;
background: black;
font-weight: bold;
position: fixed;
background-image: url('imagesfolder/someImage.jpg');
}
It works when I put the image in the html page, but then the image is treated as inline and any element I try to place on top of the image is shunted to the right of it or below if I use display block on them.
What I'm trying to do is have an image that resizes with the browser and place divs containing text on top of the image also rescaling with the browser and the image.
Apologies if this seems simple but I am used to absolute positioning not responsive layouts.
try:
#mainPage {
width: 100%;
height: 100%;
font-size: 3vw;
text-transform: uppercase;
background: black;
font-weight: bold;
position: fixed;
background-image: url('imagesfolder/someImage.jpg');
background-size: cover;
background-position: center center;
}
It's the background-size property you want to be looking at here, does exactly what you need. If you set it to cover, your image will always cover its entire container.
Note this is not supported in IE8 and earlier.
More info and possible values at: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
you can use the
background-size: cover;
or
background-size: 100% 100%;
Related
I'm working on a webpage main title. I want to set a 100% height background image and a big title on the front of it.
This is how I did:
In the CSS file:
body, html {
height: 100%;
}
.bg {
background-image: url("../img/image.JPG");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bigtitle {
/** padding-left:15%;***/
padding-top: 20%;
color: white;
font-family: 'Trocchi', serif;
font-size: 1500%;
font-weight: normal;
margin: 0;
/*line-height: 1.0em;*/
}
In HTML file:
<div class="bg">
<center><h1 class="bigtitle">My title</h1></center>
</div>
I also tried to set the size of the title with em but it was the same problem.
This is good on the desktop but completely fail on mobile or small screen size. How can do to work on mobile and on desktop as well?
I would just leave this as a comment but I don’t have permissions yet:
You can manually adjust the size of the title to your liking for different screen sizes using media queries in your css. Although they probably aren’t the most efficient way to add responsiveness, they have worked wonders for me.
try using this, I have no problem with it, you can set your desired height, should work on both mobile and desktop.
.bg {
background-image: url("../img/image.JPG");
height: calc(100vh);
width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Take off the height, then your image will equal the background-size: cover;
.bg {
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
https://jsfiddle.net/bw7xmytp/
I have a PHPBB theme I am starting to construct. In the CSS file, I have three items--a body and two divs--with background images. The background images for the divs have ceased working in all browsers.
The site with the theme presented is here: https://www.tarazedi.com/index.php?style=7
The problem images are here: https://www.tarazedi.com/styles/wTcFresh/theme/images/site_banner.png
The CSS is located in wTcFresh/theme/.
The images are all in the same locations but there seems to be a pathing issue but is working very strangely. I have tried using both relative and absolute URLs. I have tried url(x);, url('x');, and url("x"); and also changing the other background elements. In no case have the banner and logo images started working, but the body image works fine despite being in the same place and using the same syntax. When I inspect the computed styles of the divs in Chrome the image will show as the full absolute URL correctly but the relative link links instead to tarazedi.com/images/site_banner.png which returns a 500 error because that URL is, obviously, useless. In Edge and Firefox the inspector shows the correct link to the image but still does not render.
I have cleared browser and site-side caches with each attempt I make to fix it.
I am baffled. What am I missing?
body {
color: #CCCCCC;
background-color: #000000;
background-image: url("images/bg.jpg");
background-attachment: fixed;
}
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
overflow: hidden;
background-repeat: no-repeat;
background-image: url("images/site_logo.png");
background-attachment: fixed;
background-position: left center;
vertical-align: middle;
}
To achieve expected result,adjust background-position and it is not issue with the background-image
1.Remove background:position to see the difference
Editing it thusly fixed the problem and it now renders correctly. Thank you very much!
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
align-items: center;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
background-image: url("images/site_logo.png");
overflow: hidden;
background-repeat: no-repeat;
background-position: left;
align-items: center;
}
i am trying to create a page that has a background image in between a header and footer will work on any screen size.
I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to mobile size screen then the background is repeated.
Here is my code:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}
Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.
The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/
If somebody could please advise on how i could fix this, would really appreciate it.
Thanks in advance.
none is not a valid value for background-repeat, use no-repeat instead.
background-repeat property (MDN) (W3Schools)
Here is a list of possible values for background-repeat, you need:
background-repeat: no-repeat;
None doesn't exist for this property.
Use background-repeat:no-repeat
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
or simply short the code
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100%;
border: none;
}
Change background-repeat: none; to background-repeat: no-repeat; none is not a valid value for background-repeat property.
Your code should be:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
You can also use short hand css background property as follows:
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100% auto;
border: none;
}
More Details
I've got a div which absolutely needs an auto width that depends on text length inside it. I want a blue halo showing off as background image of that button when I hover it with my mouse.
But here's the challenge I can't solve: I want that blue halo png image to fetch the exact width of the div, I want a real distortion of the halo image without respecting any proportion.
How can I accomplish this without giving an absolute value for the width of the div? And without using anything more than HTML and CSS3?
HTML side:
<div class="button">
<p>Hover here!</p>
</div>
CSS side:
.button {
width: auto;
height: 80px;
line-height: 81px;
font-family: sans-serif;
display: inline-block;
}
.button:hover {
background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat;
}
JSFiddle: https://jsfiddle.net/ynwsmkrz/5/
Everything you have to do is add a background-size: cover; to the .button:hover like this:
CSS:
.button {
width: auto;
height: 80px;
line-height: 81px;
font-family: sans-serif;
display: inline-block;
}
.button:hover {
background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat;
background-size: cover;
}
It makes the background image cover the whole div, without cropping it. Hopefully my answer was helpful!
I am making a page whereby there is a header and main image which need to be 100% page width. Although i need to be able to scroll down the page, therefore i need to a way to make the div 100% page width without a fixed position.
Are you looking in something like http://twitter.github.com/bootstrap/components.html#navbar ?
The simplest way is ( DEMO ):
.navbar {
display: block;
border: 1px solid red;
height: 60px;
background-image: url(http://www.phing.info/trac/chrome/site/logo.gif);
background-repeat: no-repeat;
text-align: center;
/*background-size: cover;*/
background-size: contain;
}