Sorry, I have already asked this question here, but now I have another theme for my website and I dont get any further. Can someone explain me, how I can set a specific background for my website? Here is a screenshot of my site:
I have a specific background image, but now the text is hard to read. How I can define a background image only on the left and right space around the content?
I think you just need to set a background color on the wrapping element that the content is in. This can be done with CSS. You can see through it because its either set to transparent or doesnt have anything set.
Now I set the background color of the wrapping div element like this:
div {
background-color: white; }
But now the whole background is white and the background image dissapears. What doing I wrong?
you have probably done it on the wrong element, inspect the first heading in webbrowser and find the nearest div element with a class on it… if only the header turns white, go up to the next one… keep going until it looks right! Without being able to see the code it is hard to help.
Colors should be written in hex:
div (background-color: #fff)
Can you show us some code? Would be easier to help you.
I’ve inserted this css rule in the header.php of kirby:
.wrapper{
background-image: url(background.jpg);
}
and after the body tag in this file:
<div class="wrapper">
than i closed the div-Tag in the footer.php:
</div>
Now I can see the background image, but the text is hard to read.
Change your css
to
body{
background-image: url(background.jpg);
}
.wrapper{
background-color: #fff;
max-width: 50em;
}
I changed my css like this:
body{
background-image: url(background.jpg);
}
Now my website looks like this:
It’s near what I want. But the picture box rises above a little bit at the right border.
Can you post the code? Its hard to understand what the problem is.
Maybe the image div is wider than your wrapper?
Here is some code, I hope it helps:
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="gallery autoplay items-4">
<div id="item-1" class="control-operator"></div>
<figure class="item">
<img src="http://localhost/testblog/thumbs/home/choreo-header-940x400.jpg" alt=""> </figure>
<div id="item-2" class="control-operator"></div>
<figure class="item">
<img src="http://localhost/testblog/thumbs/home/werder-bremen-choreo-klein-940x400.jpg" alt=""> </figure>
<div id="item-3" class="control-operator"></div>
<figure class="item">
<img src="http://localhost/testblog/thumbs/home/wormatia-ball-header-neu-940x400.png" alt=""> </figure>
<div id="item-4" class="control-operator"></div>
<figure class="item">
<img src="http://localhost/testblog/thumbs/home/wormatia-fcs-gross-940x400.jpg" alt=""> </figure>
<div class="controls">
<a href="#item-1" class="control-button"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#item-2" class="control-button"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#item-3" class="control-button"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#item-4" class="control-button"><i class="fa fa-circle" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="latest-article-title">Latest Posts</h3>
</div>
<div class="col-md-4">
<div class="latest-article text-center">
<img src="http://localhost/testblog/thumbs/blog/2-pleite-in-frankfurt/soultani-mimbala-600x400.jpg" alt=""> <h4>1:2-Pleite gegen FSV Frankfurt</h4>
<p>
Unglückliche Niederlage am Bornheimer Hang beim FSV Frankfurt. Vor 1057 … </p>
<a href="http://localhost/testblog/blog/2-pleite-in-frankfurt" class="btn btn-default has-icon"><span>Continue Reading</span><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<div class="col-md-4">
<div class="latest-article text-center">
<img src="http://localhost/testblog/thumbs/blog/arbeitssieg-gegen-dreieich/wormatia-dreieich-600x400.jpg" alt=""> <h4>Arbeitssieg gegen Dreieich</h4>
<p>
Mit einem mühevollen 1:0-Sieg konnte sich Wormatia Worms gestern Abend … </p>
<a href="http://localhost/testblog/blog/arbeitssieg-gegen-dreieich" class="btn btn-default has-icon"><span>Continue Reading</span><i class="fa fa-arrow-right"></i></a>
</div>
</div>
<div class="col-md-4">
<div class="latest-article text-center">
<img src="http://localhost/testblog/thumbs/blog/5-debakel-in-hoffenheim/tsg-hoffenheim-wormatia-600x400.jpg" alt=""> <h4>0:5-Debakel in Hoffenheim</h4>
<p>
Mit null Toren und null Punkten mussten die Wormaten heute die Heimreise… </p>
<a href="http://localhost/testblog/blog/5-debakel-in-hoffenheim" class="btn btn-default has-icon"><span>Continue Reading</span><i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<section class="imageblock bg-primary">
<div class="imageblock-content col-md-6 col-sm-6">
<div class="background-image-holder" style="background: url("http://localhost/testblog/content/1-home/ewr-arena-eingang.jpg")">
</div>
</div>
<!--end of imageblock-->
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-5 col-sm-6 col-sm-offset-6 bg-default">
<div class="imageblock-text">
<p>Lorem Ipsum is simply...</p>
<p>It has survived...</p> </div>
</div>
<!--end of col-->
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
</div>
</div>
</div>
Please use developer tools to inspect your styles. Screenshots or just HTML is not helpful for solving this issue (and this is not a Kirby related problem). If you are not familiar with using dev tools, you can find really good introductions with a little bit of googling.