When I am finished with the page. When its done. I want somehow to lock the images (for ex. header logo layer - try it out: http://www.lipanska.cz/ move with the header text EWITA). On the other side at https://www.google.com the logo is locked and I cant move with it.
How could i lock them?
Thank you very much for your time!
It's because Google uses a div with a background-image and the other page is using an img tag. The latter makes it dragable with the mouse cursor.
You can also prevent dragging with any tag as discussed here:
Disable dragging an image from an HTML page
Use Background Images.
demo:
div{
background:url(http://lorempixel.com/100/100);
height:100px;
width:100px;
}
<div></div>
<img src="http://lorempixel.com/100/100"></img>
You cannot move first image, however you can move the second one.
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I'm coding a page where the video files will scroll, but the banner/logo is static, at the top.
Since I've added css code for the video files to dynamically scale with the page width, the video files now scroll on top of the banner/logo.
Any ideas?
Thanks
You need to add a z-index to your div that is the static header/banner (this div does not have an id..I suggest you assign an id and add
z-index:1
example
#banner{
z-index:1
}
I am trying to create a simple black box that spans the top of my web page.
Currently I have this:
<canvas id="block" align="center" height="250" width="5000"
style="border:1px solid #000000;background:#ffffff;position:absolute;top:-100px;z-index:10;">
Initially I tried making it a percentage, but it's far too complex for me.
I need to prevent the box from causing the page to scroll to the sides.
I'm sure this is a very simple thing, probably the main issue I am having is not knowing what to search for.
I have been googling for 2 hours now.
Yo can simply use overflow:hidden
example:
<div style="overflow:hidden; width:200px; height:200px;position:relative;"></div>
Watch the demo: jsFiddle Live Demo
I am trying to create a simple black box that spans the top of my web page.
If you're trying to accomplish this then all you need to do is the following:
<div style="background-color:#000;height:10px;width:100%;"></div>
and place it directly under your opening <body> tag.
I'm confused as to why you are setting width:5000px; on a canvas, if you're expecting to make a canvas element wider than the viewport and still not allow scrolling then you need to set overflow:hidden on the body element.
body {
overflow:hidden;
}
If the unwanted scrolling is due to user pressing arrow keys in your application, then you should be telling the browser that you are handling the arrow keys yourself by executing:
event.preventDefault();
in the handler for keyboard events.
Additionally html {overflow: hidden} might work too.
I added two divs to hold background images for decorative purposes - as requested by the artist whom is working with me on a website.
At first, it worked very well. The images were supposed to show on each side of the wrapper div holding the website content - without affecting page width.
Then the organization owning the website got another sponsor, who's logo I had to add to a column on the right. I created a new id for the 5th "button" and created a div for it. Uploading it, I noticed that a scroll bar had suddenly appeared on the bottom of the page, for no apparent reason.
I first suspected the button to be the problem, but eventually found out that the right-most decorative div was bending the page width, despite using absolute positioning. Both of the divs use the same code, only mirrored for left and right. I have no idea what is causing the problem..
(You can see the problem in action while it lasts at www.torucon.no/no/)
Please help me out! Here is the CSS for both of the divs:
#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}
#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}
Here is an HTML snippet showing the HTML of the divs:
<div class="wrapper"> <!-- Contains the entire website for structure -->
<div id="wolf">
</div>
<div id="lion">
</div>
((In case you didn't get it: The wrapper div is supposed to be centered, and it is. But when I resize my window, I find that a scroll bar appears long before the wrapper content is even close to the browser window borders. That would be annoying on computers with low resolution or small screens!))
I think what you want is to have the lion and wolf progressively appearing as the user widens the browser viewport, but otherwise partially hidden off to the sides of the wrapper. Correct?
I think you're only safe option to achieve this without triggering the scrollbars you don't like are to combine the images into one and attach them as the background image on the body element of the page.
I believe you're right about using overflow-hidden on the body -- you'd loose the ability to scroll to see overflowed content if the viewport is resized down below the wrapper's width.
I have checked that you posted link http://www.torucon.no/no/ but i coudnt see bottom scroll bar ,
Anyway , Why you cant set background?
<body>
<div class="overlay">
<div class="wrapper">
</div>
</div>
</body>
<style>
body{width:100%; background:---;}
.overlay{width:100%; background:---;}
<style>
The website I'm working on has a list ul with above a 100 (li) bullet points. Each of them links to another html-site.
I would like to show an image preview, whenever you hover over one of the links. The image should slowly slide in from the left.
As each preview image is up to 40kb in size, I actually don't want to preload the images.
What would be the best way to prevent it?
I would like to do this only via CSS, without JS, if possible.
My ideas:
a) default-state: <img>-tag with display:none; hover-state: set it to display:inline . Problem: transition does not work with display :(.
b) simply use a div instead and write a CSS-rule for every li, so that on hover the corresponding background-image with the preview-image is assigned to it.
Does this prevent the preloading of the image?
If you add it as a background image, but only show it on hover the image won't load until the user hovers over whatever has the style. You should be able to set the background image inline instead of outputting the image file as an IMG
You can't do this with just CSS because your browser will load all contents (regardless of display:none). I would recomend javascript or server side like php.
Maby jquery load could be something?
http://api.jquery.com/load/