I need to use an image of a hollow hexagon as a background for some content in my site. It kind of should look like this:
But I'm having all kinds of trouble laying out the content inside the hexagon.
So far I have this:
.hex-bg {
background-image: url('/images/diamond.png');
background-size: cover;
background-repeat: no-repeat;
min-height: 30px;
padding: 10px;
}
What would you guys think it's the best way to approach this scenario?
JSbin Demo
.hex-bg {
background-image: url('/images/diamond.png');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
min-height: 30px;
box-sizing:border-box;
padding: 20px;
width:250px;
height:290px;
text-align:center;
color:white;
font-size:14px;
}
.hex-bg img{
max-width:50px;
padding:20px;
}
.text-wrapper{
margin-top:10px;
}
As long as the text is not too long and doesn't spill out ofthe bottom of the hexagon it should work. In the case you need an exact wrap of the text you might want to consider another approach such as CSS Text Wrap
Related
I am having difficulty trying to make the logo at the top of my web page change when I hover over it.
To be more specific, I have a logo at the top of my page, and I created another logo slightly different for when a user hovers over it.
Here is my code:
#top{
width:1366px;
height:100px;
background-color:#1e125b;
}
body{
background-color:white;
background-repeat:repeat;
margin: 0;
}
#top:hover{
background-image: url('Logo_hover.png');
}
The Logo_hover multiplies itself throughout the whole div, instead of simply changing the initial image. I understand that the background-image is not what I should be using for this problem but I cannot seem to find any other solutions.
#top:hover{
background-image: url('Logo_hover.png');
background-repeat: none
}
have you used this.onmouseover & this.onmouseout ?
<img src='your pic' onmouseover="this.src='your pic on mouse over';" onmouseout="this.src='your pic on mouse out';" />
.logo {
background-image: url("http://placehold.it/120x120&text=image1");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
.logo:hover{
background-image: url("http://placehold.it/120x120&text=image2");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
<div class="logo"></div>
#top{
background-image: url(logo.png);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
width: 120px;
height: 120px;
}
#top:hover{
background-image: url(logo_hover.png);
}
I need your help! I have a background image and I need one part of that image to move (rotate or zoom) whenever you hover it. This image is just an example but it's pretty similar what i have, except mine is more centered.
I want the little sticker on the bowl to move a little (rotate like 20 degrees or any sort of animation to be honest) whenever you mouse over it.
I've already cropped the sticker so now I have two images. I'm using the background as my div's bg. Here's my code:
HTML:
<header class="background-image">
<div class="sticker"></div>
</header>
CSS:
.background-image {
background-image: url(../img/bg-principal.png) !important;
background: white;
height: 90%;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
I've managed to place the sticker where it's supposed to be, but it's not responsive. When the screen is resized, the little sticker moves and I can't seem to find a solution for that. Basically what I need is to pin the sticker to the background image, but I have no idea if that's possible. I looked around and couldn't find anything that worked.
Does anyone have any suggestions? Is there any way that I can do this using only CSS? I only have basic knowledge of jQuery so I'd like to avoid that but if it's the only solution I'd be fine with that too.
Thanks!!
EDIT: I tried using a transparent png sticker the same size as the background, but since I need the hover effect, I end up having the same problem.
If you use vw as a unit of measurement, the sticker can track based on the size of the element
.background-image {
background-image:
url(http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg) !important;
height: 40vw;
background-position: center;
background-size: contain;
background-repeat: no-repeat; }
.sticker{
width:20px; height:20px; position:absolute;
top: 20vw; left:40vw;
background:red;
}
<header class="background-image">
<div class="sticker"></div>
</header>
I finally found a solution!
This is my final code:
HTML:
<div class="background">
<img src="..."/>
<div id="pin" class="sticker">
</div>
</div>
CSS:
.background {
margin:10px;
position: relative;
display: inline-block;
}
.map img {
max-width:100%;
display: block;
}
.box {
width:20%;
height:20%;
background-image: url(...);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin {
top:60%;
left:46%;
}
I need help regarding background image size scaling.
code: http://codepen.io/AnilSimon123/pen/JRBRZa
here i have kept
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-size:100% auto;
height:700px;
width:100%;
background-position:top center;
background-repeat:no-repeat;
}
As you can see the image has dimensions 588 x251 px.
I want the image to stretch along the width but keep its original height,all the while keeping the height of the container as 700px. The height of the image is dynamic.
Thanks and regards,
Anil Simon
Try using background-size: cover
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
min-height: 251px;
width:100%;
background-position:top center;
background-repeat:no-repeat;
background-size: 100%;
}
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat top left;
background-size:100% 251px;
width:100%;
height:700px;
}
<div class="bgimage">
this is test
</div>
Use the background-size: cover instead background-size:100% auto;
background-size: cover :
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Background cover works just fine.
background-size: cover;
But don't forget to add also the background-position to fixed and center.
For more details you can check https://css-tricks.com/perfect-full-page-background-image/
Hope it helps
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-attachment: fixed;
background-position:top center;
background-size: cover;
-webkit-background-size: cover;
height:700px;
width:100%;
color: #fff;
text-align: left;
background-size:100% auto;
background-repeat:no-repeat;
}
i think this is what you want
Try adding a container around your div with a height of 700px and add the bgimage on another div that is positioned absolute(so it doesn't affect anything else), height 251px and z-index:-1 to send it to the back. Also to stretch it set the background size to 100% 100%. Hope this helps
.container{
height:700px;
width:100%;
}
.bgimage{
margin:0;
position:absolute;
z-index:-1;
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-size:100% 100%; height:251px;
width:100%; background-position:top center;
background-repeat:no-repeat;
}
<div class="container">
<div class="bgimage"></div>
this is test
</div>
.bgimage {
background: url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat center top;
width: 100%;
height: 700px;
background-size: 100% 251px;}
I would like to make a background image move as the use scrolls and it is normal to use
background-attachment:fixed;
But the issue is that it is stretching the image and I am not able to position it anymore.
http://jsfiddle.net/5c3b56a7/3/
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
}
.container2{
background-attachment:fixed;
}
You can see the issue better on full screen
http://jsfiddle.net/5c3b56a7/3/embedded/result/
First image is position center top
second one cannot be positioned due to the attachment.
Is there any way to do this?
Unfortunately you cannot use background-attachment: fixed and background-size: cover together.
When background-attachment: fixed determine background image to behave like position: fixed element, background-size: cover forced it to calculate background size relatively to the element itself.
Still you can use JavaScript to calculate background position in window.onscroll() event.
Maybe I misunderstood the problem. Here is my variants as I realized that I want to get a result.
http://jsfiddle.net/p507rg68/light/
HTML
<body class="container2">
<div class="container"></div>
<div class="push"></div>
</body>
CSS
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
}
.container2{
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
background-size:cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
}
.push{
margin-bottom:800px;
display: block;
width: 100%;
height:1px;
}
use background-size: to set the image size!
I have this site
https://preview.c9.io/pgonzalez/demo-project/html/test.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io
The logo at the top is an image, I'm using this technique
h1{
position:relative;
}
span{
width:100%;
height:100%;
position:absolute;
background-image:url(Images/headertext.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header>
<h2>
<span></span>
The rainy season
</h2>
</header>
and it works as I expect. However, the same technique doesn't work here
https://demo-project-c9-pgonzalez.c9.io/html/API.html
You will see how the background image shows twice and in a completely different position, the code I'm using is the same
h1 {
position: relative;
}
span {
width: 100%;
height: 100%;
position: absolute;
background-image: url(Images/headertext.png);
background-repeat: no-repeat;
Can't figure out what is causing this. Thoughts?
It is because there is another span on the page.
You want:
h1 span {
width: 100%;
height: 100%;
position: absolute;
background-image: url(Images/headertext.png);
background-repeat: no-repeat;
}
And probably want to reference it more specific than that. You CSS will add that background to ANY span on the page. What I posted above will only affect spans that are children of h1 tags.
This is because one page header is defined as such, which doesn't work:
#headertest{
position:absolute;
width:100%;
height:100%;
background-image:url(../Images/developerstitle.png);
background-repeat:no-repeat;
}
And on the other page that this technique does works is defined as:
header{
color:white;
background-color:black;
padding:10px;
text-align:center;
background-image:url(Images/headerbackground.jpg);
background-attachment:fixed;
background-position:center;
}
My guess is that the Position statement must be changed/removed.