How to prevent background image from tiling? - html

<div style="background-image: url('https://i.ibb.co/v1B855w/bg15.png'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name6.png" /></div>
I wish to make the background image display the entire width instead of tiling.
tried stretching the background to 100%, it didnt work


.bg {
background-image: url('https://i.ibb.co/v1B855w/bg15.png');
color: #000000;
background-size:cover;
background-color: #000000;
background-attachment: fixed;
text-align: center;
background-repeat:no-repeat;
}
<div class="bg">
<img src="https://i.ibb.co/L6zQY0S/name6.png" />
</div>


You can also use background-size:100% 100%; value for stretching your background image fully.
.bg {
background-image: url('https://i.ibb.co/v1B855w/bg15.png');
color: #000000;
background-size:100% 100%;
background-color: #000000;
background-attachment: fixed;
text-align: center;
background-repeat:no-repeat;
}
<div class="bg">
<img src="https://i.ibb.co/L6zQY0S/name6.png" />
</div>

Related

how to add a background image to a css class

I want to add a background image to a CSS class but it dosn't show up.
I've already tried to add height and width.
<div class="landing1">
<h2>The Lnad OF Programming</h2>
<p>get involved</p>
</div>
<style>
body,
html {
margin: 0;
size: 100%;
}
.landing1 {
margin: 3px;
text-align: center;
background-image: url(imgs/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 400px;
height: 500px;
}
</style>
the background image isn't show up.

It is working. You are giving the image path wrong
body , html{
margin:0;
size:100%;
}
.landing1{
margin:3px;
text-align:center;
background-image:url(http://placekitten.com/500/500);
background-repeat: no-repeat;
background-size: cover;
background-position:center;
width:400px;
height:500px;
}
<div class="landing1">
<h2>The Lnad OF Programming</h2>
<p>get involved</p>
</div>

Text in an image

How can I get my first name and last name below to be shown within an image at the top in the middle middle (with a bit of space from the top), and to have their position remain still together with the image when rendering the browser smaller or bigger?
(I have seen this: https://www.w3schools.com/howto/howto_css_image_text.asp, but is there any other way?)
Any help welcome, please
body{
background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
text-align: center;
justify-content: center;
align-items: center;
color: white;
}
.bigger{
padding: 30px;
height: 300px;
}
<div>
<img src="https://pbs.twimg.com/media/DYwc96nXkAY1xFh.jpg" class= "bigger">
<h3>First Name</h3>
<h3>Last Name</h3>
</div>

Is that what you want?
Refer to this post for more information.
body{
background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
text-align: center;
color: white;
}
.container {
position:relative;
}
.TextContainer {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
<div class="container"><img class="bigger" src="https://pbs.twimg.com/media/DYwc96nXkAY1xFh.jpg"/>
<div class="TextContainer">
<h3>First Name</h3>
<h3>Last Name</h3>
</div>
</div>

Image not fully responsive

I am using Bootstrap and have an image 1920x1280. It is currently responsive only till about a width of 1000 px and stops shrinking from there. Width below 1000 px, it starts to cut off the side of the image. I need the full image to be visible on any device. I am adding the image via CSS background url. Is there a way around this. Added the relevant code below. The image is placed within the ID 'intro'.
Image
HTML
<div id="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 style="color: #000000">Title<span class="brand-heading">Quote</span></h1>
<p style="color: #000000" class="intro-text">Short description</p>
Learn More </div>
</div>
</div>
</div>
</div>
CSS
#intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/intro-bg.jpg) no-repeat center center fixed;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#intro .intro-body {
display: table-cell;
vertical-align: middle;
}
#intro .intro-body H1 {
font-size: 76px;
font-weight: 700;
color: rgba(255,255,255,0.8);
text-transform: uppercase;
}
#media(min-width:768px) {
#intro {
height: 100%;
padding: 0;
}
#intro .intro-body .intro-text {
font-size: 18px;
letter-spacing: 1px;
margin-bottom: 100px;
color: rgba(255,255,255,0.9);
}
}

background-size: cover; try to fill all background space so maybe cutoff edge of image. If you will show image completely without cut off set background-size to contain.
background: url(../img/intro-bg.jpg) no-repeat right bottom scroll;
background-color: #31f1fd;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;

Please try this Style instead of your id intro. There are two methods. One is with fixed height and width the other one is without width and height.
#intro{
width: 100%;
height: 400px;
background-image: url('../img/intro-bg.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
or
#intro{
background-image:url('../img/intro-bg.jpg');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}

CSS: Make a background-image appear without having content and/or fixed sizes?

I've got this code (with no header-image visible) so far:
.wrap {
margin: 50px auto;
}
html,
body {
height: 100%;
}
body {
background-image: url('https://placebear.com/1000/800');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.header {
background-image: url('https://placebear.com/940/248');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="wrap">
<div class="row">
<div class="medium-12 columns header"></div>
</div>
</div>
If you give the header-image a fixed size of 248px you can see it appear. Example with visible header-image:
.wrap {
margin: 50px auto;
}
html,
body {
height: 100%;
}
body {
background-image: url('https://placebear.com/1000/800');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.header {
background-image: url('https://placebear.com/940/248');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 248px;
border: 3px solid white;
}
<div class="wrap">
<div class="row">
<div class="medium-12 columns header"></div>
</div>
</div>
Is there a way to make it appear without using a fixed height?
Like when using a classic img-tag with just src- and alt-attribute. Then height is read out of the image-file self.
I would like to avoid fixed heights in there because if the image changes then it becomes all wrong.

I think you have to define a height if using background-image. Might be better to use img tag and just put a width of 100%, like so:
.wrap {
margin: 50px auto;
}
html,
body {
height: 100%;
}
body {
background-image: url('https://placebear.com/1000/800');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.header {
border: 3px solid white;
}
img {
width: 100%;
}
<div class="wrap">
<div class="row">
<div class="medium-12 columns header">
<img src="https://placebear.com/940/248" alt="Bear Image">
</div>
</div>
</div>

Invisibility of the one element go through the other(white) as well to Background image

this is my code:
body{
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header{
height:2em;
width:100%;
position:fixed;
top:0; left:0;
background-color:white;
}
.main{
width:100%;height:10em;
margin-top:5em;
background-color:white;
}
.mainPanel{
width:50%;
margin:auto;
background-color:yellow;
height:5em;
}
<html>
<body>
<div class="header">
</div>
<div class="main">
<div class="mainPanel">
</div>
</div>
</body>
</html>
I want that the yellow div is transparent and shows the background image of body. That the yellow div go trough the white div behind it and shows the background image of body. Is that possible? I hope it comes clear what i meant.

The only workaround I can think of would involve breaking your white box into three rectangles and arranging them to form a window of sorts. Here, try this out:
body {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
.header {height:2em;width:100%;position:fixed;top:0; left:0;}
.main {
width: 100%;
height: 10em;
margin-top: 5em;
}
.mainPanel{
width:50%;
margin:auto;
height:5em;
}
<html>
<body>
<div id="left-rectangle" style="background-color: white; width: 25%;height: 160px; position: absolute;"></div>
<div class="right-rectangle" style="background-color: white; width: 25%; float: right; height: 160px;"></div>
<div class="center-rectangle" style="position: absolute;margin-left: 25%;background-color: white;width: 50%;height: 80px;margin-top: 80px;"></div>
<div class="header">
</div>
<div class="main">
</div>
</body>
</html>

You could simply repeat the background, and since it has a fixed position, it will be exactly like the body background and you will not notice a difference.
body, .mainPanel {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
Simply extend the background of body to .mainPanel to create the illusion.
Demo: jsFiddle
html, body {padding: 0; margin: 0;}
body, .mainPanel {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
.header {
height: 2em;
width: 100%;
position: fixed;
top: 0; left: 0;
background-color: #EEE;
}
.main {
width: 100%;
height: 10em;
margin-top: 5em;
background-color: white;
}
.mainPanel {
width: 50%;
margin: auto;
height: 5em;
border:1px dashed #CCC; /* just for demo */
}
<div class="header">header</div>
<div class="main">
<div class="mainPanel">
</div>
</div>