So I have two dives under each other and I would like to have the 2 background images aligned. The with of both images are the same but the hight is different. (the second image should repeat instelf (ideally have a javascript that would load it while scrolling).
So I was able to align the images but scaling is problem (fixed size right now).
Does anybody knows how to do it?
Here is my code so far
#extends('layouts.application')
#section('styles')
<style type="text/css">
.bgimage{
background-image: url('{{ asset('/images/bg/logo.png') }}');
background-attachment: fixed;
position: relative;
background-position: left;
background-position: left;
top: 0;
left: 0;
background-color: white;
width: 100%;
height: 100vh;
}
.image {
background-image: url('{{ asset('/images/bg/stripe.png') }}');
background-attachment: fixed;
position: relative;
background-position: left;
background-repeat: repeat;
top: 0;
left: 0;
background-position: left;
background-color: white;
width: 100%;
height: 50vh;
}
</style>
#endsection
#section('layout-content')
<div class="bgimage" > </div>
<div class="image"> </div>
<!--/End Footer -->
#endsection
#section('scripts')
#endsection
Thanks allot
I am not sure whether I got the requirement completely, but here is an attempt :
https://jsfiddle.net/wkjys4cu/1/
.outer-container {width: 900px;position: relative;}
.box {
width: 50%;
height: 250px;
background-image: url('https://www.w3schools.com/cssref/img_tree.gif');
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
}
.box1 {
outline: 1px solid black;
background-size: 50% 50%;
background-position: 50% 60%;
}
.box2 {
outline: 1px solid red;
background-size: 50% 75%;
background-position: 20% 80%;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="outer-container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>
Related
There have been several questions regarding some kind of transparent border but not what I am looking for, I think.
It might be very stupid but: Is it possible somehow to have items (those white squares) on a background (the black texture) with those items each having a border that "remove" the background for a 10px (or whatever) border?
So you have a continuous background and each item on top of it "cuts out" some part of it.
A true "transparent" border (like other questions) obviously would just let you see the background, so that is not what I mean.
If not, what would be the way to achieve a responsive design like that?
Sorry, I don't know any other way to explain it. Thank you.
See example/fiddle here: jsfiddle.net/14nn2pLy
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #fd1dfa;
}
#main_header {
position: fixed;
top: 0px;
width: 100%;
height: 200px;
background: url() no-repeat center top;
background-size: contain;
}
#main_footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 200px;
background: url(https://preview.ibb.co/hACMzS/background_footer.png) no-repeat center bottom;
background-size: contain;
}
#icons {
position: fixed;
bottom: 0px;
width: 900px;
height: 75px;
background: url(https://preview.ibb.co/mkPODn/footer_items.png) no-repeat center bottom;
border: 10px;
border-color: rgba( 0, 0, 0, 0);
}
<div id="main_header"></div>
<div id="main_footer">
<div id="icons"></div>
</div>
My thought process
The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.
Example:
.bg {
position: relative;
height: 250px;
width: 500px;
background-image: url(https://i.imgur.com/nRXO8xa.jpg);
}
.border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid black;
}
.no-border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid #F7F2D5;
}
<div class="bg">
<div class="border">black border</div>
<div class="no-border">"transparent" border</div>
</div>
Solution:
The desired effect is possible using clip-path on the background. Notice that I've changed the HTML and CSS too, otherwise it wouldn't work. The clip-path is used to basically cut out the part of the background image you don't want, so that it becomes transparent, and it is activated on hover.
body,
html {
height: 100%;
margin: 0;
}
body {
background: url(https://images.unsplash.com/photo-1473662712020-75289ee3c5de);
background-size: cover;
}
.container {
height: 140px;
width: 618px;
position: relative;
top: 40%;
margin: 0 auto;
}
.bg {
height: 140px;
width: 618px;
position: relative;
}
.icon {
height: 50px;
width: 50px;
position: absolute;
top: 25.25%;
left: 38.25%;
z-index: 1;
}
.icon:hover+.bg {
clip-path: polygon(0 0, 0 100%, 44% 78.5%, 37.5% 50%, 44% 22%, 50.5% 50%, 44% 78.5%, 0 100%, 100% 100%, 100% 0);
}
<div class="container">
<div class="icon">
<img src="https://i.imgur.com/V2eI4Rm.png" alt="icon">
</div>
<div class="bg">
<img src="https://i.imgur.com/D3V3ZYq.png" alt="background">
</div>
</div>
you could create a image with transparent background and use that as a border-image.
.background {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background-color: #fd1dfa;
z-index: 1 !important;
}
.background:after {
content: "";
display: table;
clear: both;
}
hr {
border: 10px solid white;
position: relative;
top: 100px;
z-index: 5 !important;
}
.center {
position: relative;
width: 50px;
height: 50px;
background-color: #fd1dfa;
color: #ffffff;
padding: 10px;
z-index: 10 !important;
}
.border {
position: relative;
z-index: 8 !important;
margin: 30px;
width: 70px;
height: 70px;
float: left;
background: white;
border: 10px solid transparent;
border-image:
}
<div class="background">
<hr>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
</div>
The header on my website contains an image set as the background, with the HTML output as below -
<div id="header-container">
<div class="inner">
<h1>
<a title="Go home..." href="http://home_url">Blog title</a>
</h1>
</div>
</div>
The method works just fine, but I'm having issues with mobile devices as my header image is 432px wide.
Because of this I need to amend the code below so that the image reduces in size should the available width of #header-container .inner be less than the width ofthe background image.
I've tried several things, including using background-size: cover; and max-width, but I cannot seem to find a working combination.
How can I overcome this issue?
Here is a JS Fiddle showing the issue. Just reduce the size of the rendered view to see that the image does not shrink.
And here is the CSS that I am using -
#header-container .inner h1{
background: transparent url(res/title-white.png) no-repeat center left;
-moz-background-size: 432px auto;
-webkit-background-size: 432px auto;
background-size: 432px auto;
height: 85px;
margin: 0;
width: 432px;
}
#header-container .inner h1 a{
display: block;
height: 85px;
text-indent: -9999px;
width: 432px;
}
You should use background-size: contain, not background-size: cover, in combination with min/max-width.
Change your CSS like this.
#header-container .inner h1{
background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
background-size: contain;
height: 85px;
margin: 0;
max-width: 432px;
}
Sample snippet
#header-container{
background-color: #053525;
border-bottom: 1px solid #4DC386;
padding: 10px 20px;
position: relative;
width: 100%;
box-sizing: border-box;
}
#header-container .inner{
margin: 0 auto;
max-width: 1000px;
position: relative;
}
#header-container .inner h1{
background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
background-size: contain;
max-height: 85px;
margin: 0;
max-width: 432px;
position: relative;
}
#header-container .inner h1:before {
display: block;
content: "";
width: 100%;
padding-top: 20%;
}
<div id="header-container">
<div class="inner">
<h1>
</h1>
</div>
</div>
#media query might help here:
#header-container .inner h1{
background: transparent url(res/title-white.png) no-repeat center left;
background-size: 432px auto;
height: 85px;
margin: 0;
width: 432px;
}
#media (max-width: 432px){
#header-container .inner h1{
background-size: cover;
}
}
You can use media queries for mobile devices. Like:
#media all and (max-width: 540px){
#header-container .inner h1{
-moz-background-size: 260px auto;
-webkit-background-size: 260px auto;
background-size: 260px auto;
width: 280px;
}
#header-container .inner h1 a{
width: 260px;
}
}
You can force this by avoiding the background image altogether as you replace it with a regular image in the <img> tag. Layer containers of content (one with the image and another with text) on top of each other with absolute position and z-index. It's a workaround to the background image problems I've experienced similar to yours and the layers provide nice flexibility for managing content.
#z1 {
z-index: 1;
}
#z2 {
z-index: 2;
padding: 5%;
color: white;
}
#z1, #z2 {
position: absolute;
left: 0px;
top: 0px;
}
<div id="outer">
<div id="z1">
<img width="100%" src="http://www.verolago.com/blog/wp-content/uploads/2013/11/sailboat.jpg" />
</div>
<div id="z2">
<p>I'm on a boat!</p>
</div>
</div>
So all of the posts I have seen are on getting your element NOT to resize or move, but the problem I am having with mine is that my element will NOT resize or move. The div called headLogo which contains the logo as the background will not move/resize with the parent div that contains it when zoomed in or out in the browser.
Here is the CSS:
#headContainer {
height: 134px;
background-image: url('images/main-bg.jpg');
background-repeat: repeat-x;
overflow: hidden;}
#headWhiteImage {
position: relative;
height: 134px;
background: url('images/header-bar.png') no-repeat 50% 0 transparent!important;
z-index: 10;}
#headLogo {
position: absolute;
height: 62px;
width: 333px;
background: url('images/logo2.png') no-repeat;
left: 133px;
top: 10px;
Here is HTML:
<div id="headContainer">
<div id="headWhiteImage">
<div id="headLogo">
</div>
<div id="headMenu">
</div>
</div>
</div>
I figured it out. To position the logo, it needed to be in a container itself, and then float the actual logo to make it move with the zoom.
Here is the HTML:
<div id="headContainer">
<div id="headWhiteImage">
<div id="headBarContainer">
<div id="headLogo">
</div>
<div id="headMenu">
</div>
</div>
</div>
</div>
Here is the CSS:
#headContainer {
height: 134px;
background-image: url('images/main-bg.jpg');
background-repeat: repeat-x;
overflow: hidden;
}
#headWhiteImage {
position: relative;
height: 134px;
background: url('images/header-bar.png') no-repeat 50% 0 transparent!important;
z-index: 10;
}
#headBarContainer {
position: relative;
height: 75px;
width: 960px;
background-color: transparent;
margin: 0 auto;
padding-top: 10px;
}
#headLogo {
height: 62px;
width: 333px;
background: url('images/logo2.png') no-repeat;
float: left;
margin-left: -27px;
}
I'm trying to replicate this mockup:
I know how to create a semi-circle in CSS but I don't want an entire semi-circle. I want just the top, center portion of a much larger circle.
I'm specifically looking for the CSS code to create the black circle in the above mockup. Thanks!
Here is my attempt:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>
<img id="logo" src="/images/logo.png">
</h1>
<div id="half_circle">
<div id="footer_container">
<div id="learn">
Learn more.
</div>
<div id="signin">
<div>
Sign in to start callin'it
</div>
</div>
</div>
</div>
</body>
</html>
#half_circle {
width: 100%;
height: 50%;
border-radius: 100% 100% 0 0;
background-color: #111111;
display: block;
position: absolute;
bottom: 0;
}
#footer_container {
display: block;
position: relative;
height: 100%;
width: 100%;
}
#learn {
text-align: center;
padding-top: 3em;
}
#footer_container a {
color:white;
}
#signin {
display: block;
width: 100%;
position: absolute;
bottom: 10%;
margin-right: auto;
margin-left: auto;
}
#signin div {
text-align: center;
}
Just make a big circle and hide it :)
Demo: http://jsfiddle.net/Ye35w/1/
body {
overflow: hidden;
}
.circle {
position: absolute;
top: 65%;
left: -25%;
display: block;
width: 150%;
height: 150%;
background-color: #ccc;
border-radius: 50%;
}
I've got a fairly simple page where I want to create something like this:
[------------------div - 100px filler color-----------------]
[------------------h1 - height 100px----------------------]
[--------------- div - 100%-(100px+100px)-------------]
The HTML I'm working with is:
<body>
<div id="header">
</div>
<h1>Big Old Text</h1>
<div id="footer">
</div>
</body>
The CSS is:
body {
margin: 0px;
padding: 0px;
}
.background {
/* background: url(rotate.php) no-repeat center fixed; */
background: url(background_image_05.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header {
background-color: rgba(255,0,255,0.10);
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
h1 {
letter-spacing: 0.1em;
font-size: 72px;
text-align: center;
padding-bottom: 25px;
padding-top: 30px;
display: block;
position: relative;
height: 100px
}
#footer {
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(255,0,255,0.10);
}
I don't want any scroll bars. I tried to modify a version of this earlier answer, but it's not quite working out the way I want it to.
I was trying to understand what you are looking for...
HTML:
<body>
<div id="wrapper">
<div id="header">
</div>
<h1>Big Old Text</h1>
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
*{box-sizing:border-box;}
body{
margin:0;
padding:0;
}
#content{
width:100%;
position:absolute;
top:200px;
bottom:100px;
border:red 2px solid;
}
You could also see the example here: http://jsfiddle.net/dZEQQ/3/
I hope this is what you are looking for(pay attention to #content styles).