I hope you'll have an answer for me.
In CSS there's the property background-attachment: fixed; which looks really fancy, so my question is there any property which I can use to "fix" some divs with text's etc. in the document?
If not, how to solve it in Typescript?
I hope you know what I mean
//edit:
Okay, i will try to describe it: with the property background-attachment: fixed; the background of a div is fixed but not it's content, so a parallax effect appears, like this: w3schools.com/howto/tryhow_css_parallax_demo.htm And know I wanted to know if it is possible to do the same with the content like texts etc.
Can you try it like this ?
HTML
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"> </div>
And here goes your style
CSS
<style>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb;
}
</style>
Credit originally goes to : this link and stackoverflow user aaronk6 and Joseph Marikle at their posts :
this link and at this link respectively.
Related
I dunno how exactly I can explain my issue or if the title is specific enough.
But what I want to do is for example I have a game like Tic Tac Toe and if the game finish a message should pop up the entire screen which block any other interactions except there is a button only.
Like that:
I think something with display: ???
Ive made a simple example for you how it could be done:
<head>
<style>
.content {
color: red;
}
.overlay {
z-index: 1;
width:100vw;
height: 100vh;
position: absolute;
top: 0;
left:0;
background-color:black;
opacity: 0.8;
}
.msg {
background-color: white;
width: 70px;
padding: 50px;
font-weight: bold;
text-align:center;
position: absolute;
top:40%;
left: 45%;
}
</style>
</head>
<body>
<p class="content">some content</p>
<div class=overlay>
<p class="msg">TEST</p>
</div>
</body>
</html>
this shows a black overlay over the complete Screen with a "TEST"-Message, you can add more Items like Buttons to the "overlay"-div if you want to.
But keep in mind, to use the "position: absolute;" attribute.
You can show or hide it by setting the "display: none" (hide) css-attribute to the "overlay"-div or setting "display: revert;" to show it
You need to create a fullscreen overlay.
Link: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
Then you can add a Javascript event so that your quiz restarts when the user clicks the restart button. Hope this helps!
You might want to look at this post, How can I disable an entire HTML page on an event like in the case of JavaScript alert? I found it just by searching your question on Google. You'll probably need to use jquery for the solution.
CSS
.content {
background-image: url("Pics/GameLogoBackground.jpg");
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
HTML
<div class="content" style="display:block;width:100%;height:600px">
I can't see the div background img, please help!
I have tried to solve the problem, with no success.
To reference a class, use the '.' prefix before "content" in the CSS.
So it would become:
.content {
...
}
EDIT:
As you now say the '.' was mistakenly missing from your CSS, some things to try:
Ensure that the file exists in the specified location.
Check that the div isn't behind anything else.
Check if file is present.Go to Your index page and try putting path to image into url. JPG and JPEG are not the same thing
Do not use just background-image , instead of that use for example : https://www.w3schools.com/cssref/css3_pr_background.asp
Also if you are not doing some CSS dark magic there is not reason to put CSS in tag and in style.
I checked Your code and it should be working. Problem is with Your picture. Try to pass more HTML code. There is a chance that some other DIV is covering it
So, I'm really, really a noob when it comes to HTML/CSS, so I apologize already.
So, what I need to do, is center an image (so that it's centered also at different resolutions/screens), on mouseover change the image to another source, and also make it act as a link to another web page.
At HTML I have this:
<a href="url to the webpage">
<img class="Logo" src="Logo.png">
</a>
And at CSS I have this:
img.Logo{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
So I have it nicely centered and acting as a link too, but I have absolutely no freaking idea how to make it show another image on mouseover. I'm sorry if this has been asked before or if this is a really simple question, I tried googling it out but none gave me an answer that's simple enough for me. :|
use the css if you don't have position: absolute-
img {
margin: 0 auto;
}
if you want to apply position: absolute then use this css-
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /* make sure to add all the vendor prefixes */
}
for the mouseover effect use this JS-
document.getElementsByClassName('Logo')[0].onmouseover = function() {
this.src = 'yourAnotherImgUrl';
}
if you want to revert back to the image when mouse is out then use this JS -
document.getElementsByClassName('Logo')[0].onmouseout = function() {
this.src = 'yourOriginalImgUrl';
}
<a href="url to the webpage">
<img src="Logo.png" onmouseover="this.src='your_other_image'"
onmouseout="this.src='Logo.png'" />
</a>
Using JavaScript you can have the default image displayed before the onmousehover event changes the image to a second image, then back to the original upon the onmouseout event being triggered.
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.