I have a css that displays an image in the left bottom corner:
body {
background-image: url(../img.png);
background-size: 5%;
background-repeat: no-repeat;
background-position: 3% 95%;
}
I want to be able to open a web page in the new tab once clicking on that image. Is there any way to achieve that with javscript?
In that case I am using a revealjs so the general structure looks like
<body>
<div class="reveal">
<div class="slides">
<section>
</section>
</div>
</div>
</body>
Get rid of the CSS on the body tag and include a image tag into the HTML.
.img
{
left: 0;
bottom: 0;
position:fixed;
}
<html>
<body>
<a href="https://www.w3schools.com/tags/tag_img.asp">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/4/49/LACMTA_Square_Orange_Line.svg" alt="image at bottom">
</a>
</body>
</html>
Here is an example of a div element that sits in the bottom left, that is wrapped in a element that will link you to the "href" specified.
You cannot assign a link to background image, but you can to an element that has the background of your choosing.
Hope this helps :)
HTML:
<a href="http://google.com">
<div id="corner-img"></div>
</a>
CSS:
#corner-img {
height: 50px;
width: 50px;
background-color: red;
position: absolute;
bottom: 2px;
left: 2px;
}
Related
I have a picture that should be at 100% of the pc screen, but when I use 100vh the elements start to adapt and the elements roll off.
Using height: 100% makes the image too big and doesn't look like it was originally.
Is it possible to somehow get the value 100vh once, and then it would be unchanged?
.main_page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
}
<div class="main_page">
<!-- Black wallpaper-->
<div class="black_opacity">
<!-- Main wallpaper -->
<div class="main_wallpaper">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
<!-- Main wallpaper end -->
</div>
<!-- Black wallpaper end-->
<!-- Book-->
<div class="book_cover">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1046492404011782164/20221127_144830.png" alt="">
</div>
<div class="book_info">
<h1> name... </h1>
<h2> description...</h2>
</div>
<div class="button_div">
<button class="book_buttons" id="Buy"> buy at 2.50$</button>
<button class="book_buttons" onclick="read_click()"> Read book</button>
</div>
</div>
I've tried to use javascript, but I didn't get any response from html. It didn't take a screen value.
First of all, the class name in HTML is written as main_wallpaper but in CSS it's .main_page so you need to rename one of them so they match. There are a few ways you can achieve full height and screen. I like one of CSS-Tricks version of how to do this.
In the HTML:
<div class="main_wallpaper">
<img class="main_img" src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
In CSS:
.main_wallpaper {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.main_img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
I have an interesting issue or objective here. I have an image that is a yellow rectangle with 3 red rectangles in it. I'd like to add clickable buttons as an overlay on top of the picture, right over the red rectangles.
Thing is, I would like those buttons to always be exactly over each red rectangles, same size/position, no matter the aspect ratio of the pciture, the screen resolution of the user, or the zoom percentage of his browser (as if the buttons were part of the image)
As an example, I've included a picture where the yellow rectangles and the red rectangles are part of the same image, and the dotted green line would be the overlay buttons or their respective divs.
[Not enough reputation for picture, but here] : https://i.imgur.com/ms4xmMZ.png
MY HTML SO FAR
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<a href=“#”></a>
</div>
</body>
MY CSS SO FAR WORKS BUT THERE SHOULD BE A BETTER WAY ?
(works when I resize window, and change browser's zoom percentage, but what if we change the aspect ratio?)
.image-container {
display: inline-block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: auto;
z-index:0;
}
.video {
position: absolute;
width: 100%;
height: auto;
z-index:1;
}
.image-container a{
position: absolute;
margin-top:4.5%;
margin-left: 57%;
width:28.3vw;
height: 7vw;
color:white;
border: 0.25vw solid green;
z-index: 999;
}
}
Any idea how I could manage to get this in a more logical way?
Any suggestions would be gladly appreciated. Thanks!
I'd wrap the anchor in a div to center it. That way you could style
anchor separately with px while maintaining its position relative to the img.
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<div class="link-container">
<a href=“#”></a>
</div>
</div>
</body>
.link-container {
position: absolute;
top: 50%;
left: 50%;
}
If you also style the .image-container with a background color
and opacity you can toggle those values on :hover.
The best way to keep buttons in place with respective to an image will be to have the container as
position: relative;
and buttons inside the div as
position: absolute;
and placed top and left with px or any unit that doesn't change with size.
But one major thing you can do is have your image as the background of image-container.
That way buttons always stay on top of the image and u can restrict resizing of the container to make the buttons stay in position better.
I hope this helps.
.image-container {
position: relative;
background-image: url("https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg");
background-size: contain;
background-position: center;
width: 600px;
height:200px;
}
.btn{
width:20px;
height:20px;
background-color: green;
border:none;
position: absolute;
}
.one{
top:10px;
left:300px;
}
.two{
top:100px;
left:100px;
}
.three{
top:50px;
left:200px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="image-container">
<button href="#" class="btn one"></button>
<button href="#" class="btn two"></button>
<button href="#" class="btn three"></button>
</div>
</body>
</html>
Is it possible to make a <div> element contain a background image, and if so, how would I go about doing this?
You mean this?
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>
You can do that using CSS's background propieties. There are few ways to do it:
By ID
HTML:
<div id="div-with-bg"></div>
CSS:
#div-with-bg
{
background: color url('path') others;
}
By Class
HTML:
<div class="div-with-bg"></div>
CSS:
.div-with-bg
{
background: color url('path') others;
}
In HTML (which is evil)
HTML:
<div style="background: color url('path')"></div>
Where:
color is color in hex or one from X11 Colors
path is path to the image
others like position, attachament
background CSS Property is a connection of all background-xxx propieties in that syntax:
background:
background-color
background-image
background-repeat
background-attachment
background-position;
Source: w3schools
Yes:
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>
Use this style to get a centered background image without repeat.
.bgImgCenter{
background-image: url('imagePath');
background-repeat: no-repeat;
background-position: center;
position: relative;
}
In HTML, set this style for your div:
<div class="bgImgCenter"></div>
Use like ..
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
You can simply add an img src Attribute with id:
<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>
and in your CSS file (stretch background):
#backgroundimage
{
height: auto;
left: 0;
margin: 0;
min-height: 100%;
min-width: 674px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
<div class="foo">Foo Bar</div>
and in your CSS file:
.foo {
background-image: url("images/foo.png");
}
<div id="image">Example to have Background Image</div>
We need to Add the below content in Style tag:
.image {
background-image: url('C:\Users\ajai\Desktop\10.jpg');
}
For the most part, the method is the same as setting the whole body
.divi{
background-image: url('path');
}
</style>
<div class="divi"></div>
I have this menu, that (when you hover over an icon) makes the icon bigger. What I tried to achieve is, to have it display correctly from both sizes, which doesn't quite work. It only works from the left side, because of the unordered list, but is there a way to make it work from both sides? (basically so the icon covers the one to the right and the one to the left without pushing it). I have this:
HTML:
<!-- START OF THE MENU !-->
<div class="menu-outer" style="font-family: 'Open Sans', sans-serif;;">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav>
<ul class="menu">
<center>
<img class="icon" src="games.png">
<img class="icon" src="home.png">
<img class="icon" src="contact.png">
<img class="icon" src="wai.png">
<img class="icon" src="wita.png">
</center>
</ul>
</nav>
</div>
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
<!-- END OF THE MENU!-->
CSS:
.icon{
display: inline-block;
margin-right: -5;
}
.icon:hover{
width: 155px;
margin: -15px -22px -15px -13px;
}
.menu{
z-index: 10;
}
Thanks for all the help.
If anything, it's all uploaded here (in the right corner menu):
http://goolag.pw/delete2.html
Add the following to your CSS:
.icon{
position: relative;
z-index: 10;
}
.icon:hover{
z-index: 100;
}
By increasing the z-index, the hovered icon is moved up in the DOM-layer, and displayed above the other icons.
You need to use z-index, but in order to do that, you need to add the element a positioning. I tried this and worked:
.menu a:hover{
z-index: 150;
position: relative;
}
You may want to set all the images' z-index property to a negative value and when the image hovers, set it to a positive one. I don't know if this is a bug but that's how it behaves, take a look at this fiddle:
#one {
width: 100px;
height: 40px;
background: red;
z-index: 10;
}
#two {
width: 100px;
height: 40px;
background: blue;
position: relative;
top: -20px;
left: 20px;
z-index: -1;
}
If you set the first element's z-index to a >0 value, it won't show over the second one until it's z-index is set to something <0.
I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/