so i have my index.html and a canvas.css
body{
}
#canvasHIPPO{
display:block;
margin:0px auto 0px;
width:100%;height:100%
background-image:url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg')
}
in my index.html:
<div id="container">
<canvas id="canvasHIPPO" width="800" height="600" display="block"></canvas>
</div>
I would like to know how to:
1) center the canvas ontop of the background city image, despite 2) different screen sizes and/or 3) maintain the same aspect ratio.
I was pretty sure the margin:0,auto should have fixed the (1) and centered the canvas ontop of the background image...what am i missing?
Thanks!
Are you trying to centre the image horizontally or vertically?
If you are centring it horizontally, in your css it should be:
#content {
background-image: url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg');
}
#contentHIPPO {
margin: 0 auto;
display: block;
width: 800px;
height: 600px;
}
and in your html:
<div id="content">
<div id="contentHIPPO">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
This will cause the div to be centred horizontally, with the image repeating in the background. If you want the image to be re-sized to the browser window, you would need to use javascript to get the size of the window.
Why not you use
display: webkit-box;
The new css3 provide more properties follow the tutorial
http://www.w3schools.com/css3/default.asp
If it's a small project, you can always convert your hex colours (#FFFFFF) to RGB and Alpha (where the alpha channel is transparency), which looks something like this rgba(255,255,255,100). However, if you've got hundreds, or even thousands, of instances of colour references, you're probably better off Googling a tutorial.
Related
What I want:
What I want (crop first one, too, but keep symmetry):
What I have:
div.row.separator div.col {
height: 40px;
width: 100%;
padding: 0px;
background-image: url("./images/rhomb.png");
background-repeat: repeat-x;
}
rhomb.png:
<div class="container-fluid" id="main-content">
<div class="row">
<div class="col">
<h1>Title here 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
luctus eros at maximus tincidunt. Donec fringilla mattis massa,
vitae blandit massa egestas sed. Maecenas ipsum ligula, pretium
nec pellentesque convallis, consequat at magna.</p>
</div>
</div>
<div class="row separator">
<div class="col">
</div>
</div>
.......
Body is gray, container is white. I want a line of rhombs after a section as separator.
So, having a small image used as background repeat-x in a div is it possible to prevent crop on last one or make the same crop on first one (align center the repetitive background...)?
UPDATE: Feel free to experiment: https://github.com/GhitaB/sample-design-bootstrap4-css (I'm just curious. Not a real problem for me.)
Even though space in background-repeat is still poorly supported, the twin property in border-image has a good support (starting in IE11)
.test {
height: 0px;
width: 182px;
margin: 5px;
border-style: solid;
border-width: 0px;
border-bottom-width: 38px;
border-image: url(https://i.stack.imgur.com/8aOpi.png) 0 0 38 0 space;
}
.test:nth-child(2) {
width: 210px;
}
.test:nth-child(3) {
width: 220px;
}
.test:nth-child(4) {
width: 250px;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Replacing:
background-repeat: repeat-x;
with
background-repeat: space;
seems to solve my problem. (Not 100%, but in almost all cases)
space: tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges.
(https://css-tricks.com/almanac/properties/b/background-repeat/)
Also: https://www.impressivewebs.com/space-round-css3-background/
Basically, when it comes to the background, sadly, we aren't able to resize images expressly. We can fill the whole page or keep the pictures original image. My idea for this would be to create multiples of the image your self using a picture editing software and then add the repeated image in the full screen format.
I am currently using background-image: url() with background-size: contain in order to have an image fill it's container. This works well for large images, as they are automatically reduced in size to fill the space without clipping or stretching the image, irrespective of the relative aspect ratio of the image and the container.
However if the image is smaller than the container in both height and width, the image will be expanded, which often makes the images appear fuzzy or pixelated.
Is it possible in CSS to have smaller images display in their original size, whilst retaining the above behaviour for larger images?
I expect I could code something in Javascript to compare the image and container size, and apply a different style, but I wondered if there was a pure css solution?
This is for a photo gallery type application on a public website so needs to support all the current commonly used browsers.
You need to compare the background image height with the container element height and apply background-size property accordingly.
See below code OR fiddle
HTML
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
CSS
#example1 {
background-image: url('http://www.w3schools.com/css/img_flwr.gif');
background-repeat:no-repeat;
background-size: contain;
padding: 15px;
}
JS
var image_url = $('#example1').css('background-image'),
image;
// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);
if (image_url[1]) {
image_url = image_url[1];
image = new Image();
// just in case it is not already loaded
$(image).load(function () {
//alert(image.width + 'x' + image.height);
if($('#example1').height() > image.height ){
alert("background height is smaller than it's containner height");
$('#example1').css('background-size', 'auto');
}
});
image.src = image_url;
}
Fiddle
https://jsfiddle.net/guruling/ujwu5zvn/
A pure CSS solution is only possible with different HTML
If you can switch to using <img> tags instead of background images, you can make the image stretch the container to certain extent and cut off anything that doesn't fit.
You simply need to turn the logic around and let images be whatever size they want to be initially, up to a limit defined by max-width. Images larger than this size will be downscaled to fit the container, while images smaller than this will keep their original size and their container will wrap them nicely.
You can also define a max-height on your container to keep your layout tidy and clip the parts of the image that would overflow it.
The HTML:
<div class="container">
<img src="whatever.jpg" class="dont-uglify-pls"
</div>
The CSS:
.container {
max-width: 10em; /* or whatever limit you want your images to start downscaling at */
max-height: 10em; /* or whatever your layout looks like */
overflow: hidden;
}
.container .dont-uglify-pls {
width: 100%;
height: auto;
display: block;
}
If you need more content in there
Simply slap position:relative on the container and fill it with absolutely positioned elements.
I have the following container holding both an image and a text element.
<div class="container">
<img id="image" src="http://dummyimage.com/200">
<span class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>
</div>
The desired behaviour is that the div should wrap to the width of the image, and therfore keep the text correctly wrapped underneath. This also needs to be flexible as content is dynamic and image width is not known in advance.
You can do this elegantly enough in Firefox and Chrome using min-content.
.container {
/*Other style stuff up here*/
width: -moz-min-content;
width: -webkit-min-content;
}
Jsfiddle of above - works perfectly in FF and Chrome.
My Problem:
Internet Explorer has no min-content (or equivalent that I can find) which means it is the text not the image which determines the containers width.
Is there any similarly elegant way of achieving this in Internet Explorer?
If not how can i restructure the html/css to allow for cross broser compatibilty for the same behaviour?
As mentioned by someone else you can use -ms-grid-columns. You just add a div around your content with IE only CSS. To other browsers the CSS is ignored and shouldn't affect your layout (unless you're applying CSS to all div elements like padding/margin in which case stop doing that).
HTML
<div id="stupidIE">
<div class="container">
<img id="image" src="http://dummyimage.com/200" alt="">
<span class="text">
Cupcake ipsum dolor sit.
Amet chocolate carrot cake oat cake bear claw croissant.
</span>
</div>
</div>
CSS
.container
{
background-color: #EEEEEE;
border: 1px solid #888888;
padding: 0.3em;
width: -moz-min-content;
width: -webkit-min-content;
}
#stupidIE
{
display: -ms-grid;
-ms-grid-columns: min-content;
}
Here's the JSFiddle: http://jsfiddle.net/LRYSp/
Tested in Chrome and IE11. But it should work in other browsers. However I don't think it will render correctly in IE9 and below.
#Stack_of_Pancakes solution is lacking in that it adds an extra div which is a block element and spans the entire width, whereas the original width:min-content doesn't have this flaw.
It can be fixed:
HTML: (intact)
<div class="container">
<img id="image" src="http://dummyimage.com/200" alt="">
<span class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>
</div>
CSS:
.container {
background-color: #EEEEEE;
border: 1px solid #888888;
padding: 0.3em;
width: -moz-min-content;
width: -webkit-min-content;
display: -ms-inline-grid;
-ms-grid-columns: min-content;
}
.container > span:nth-child(2)
{
-ms-grid-row:2;
display:inline-block;
}
http://jsfiddle.net/L28s7txr/6
a bit of jquery?
$(function() {
$('.container').width($('img#image').width());
});
FIDDLE
I've been trying to figure something out, but no luck. I have also been searching the internet for possible solutions but again, no luck.
Let's say I wanted an image with text to stay fixed in the background while the user scrolls down while viewing a site, how can I go about this? (also being responsive).
I've tried doing many things but the text goes outside of the image that is in the background when the window size is resized, when I wanted it stay in the background image.
html5
===========
<body>
<header id="head">
<!--head content-->
</header>
<div class="fixedImage">
<div class="welcome">
<h1>Welcome to this site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, enim eu posuere commodo, elit mauris condimentum sem.</p>
</div>
</div>
</body>
css
======
#head{
width:100%;
background-color:#FFFFFF;
}
.fixedImage{
background-attachment:url(img/random.jpg);
background-size: 100%;
background-repeat:no-repeat;
background-attachment:fixed;
}
.welcome{
/*styling goes here*/
}
A huuuuuuuge example of what I want to do is this:
http://www.nois3.it/
The image that is fixed right at the top, with text in it and it does not pour out of the image when resized.
If any one can please help me with this darn thing, that would be amazing!
thank you for your time!
Use a div with CSS, position:absolute;
Also the problem has been answered here:
css - Floating div positioning
I am trying to put an image as the background and would like it to align to the right, but not closely align to. Something like margin-right:10px. Is it possible to do that in pure css, without explicitly adding a margin to the image?
I had several attempts, but all failed...
http://jsfiddle.net/cA7Un/1/
Thanks in advance!
You could use a percentage, but this is only good if you know the width of the container will stay the same:
background-position: 95% center;
Otherwise, you could add 10 pixels of whitespace to the right of your image in an image editor like Photoshop.
To use the example you put on jsfiddle:
I declared the following extra style:
.rss
{
background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png');
background-repeat: no-repeat;
float: right;
width: 16px;
min-width: 16px;
max-width: 16px;
height: 16px;
min-height: 16px;
max-height: 16px;
margin: 10px;
}
This uses the same image, but adds an extra div to your your markup. This method gives you the image as a background image, and then with the margin you can position it as far from which ever side you want (by also changing the float if you want it on left hand side).
<div class='test' style='width: 300px; height: 100%'>
<div class="rss">
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
The positioning of the "rss" div before you normal markup is important as this affects the flow. Could also do it by positioning the div absolutely with a relative parent.
Finally I deleted the background from the ".test" class, as it has now been moved to the "rss" class.
I hope this helps.