I'm trying to create a simple meteor project based on the leaderboard example in their site. I want to add a small icon next to the score of each player. For doing so I created a folder named public and put test.png image there. In the css of .player .score I added the image as a background-image and not it looks like this
.player .score {
background-image: url('test.png');
display: inline-block;
width: 100px;
text-align: right;
font-size: 2em;
font-weight: bold;
color: #777;
}
When I deploy the project the image appears blank. The url for the image is not broken because if I use inspect element with chrome browser and go to resources I can see that the image was loaded.
Two things.
1) Keep in mind that for the leaderboard example, adding a background to the .player .score descendent selector will place the image underneath the score, rather than next to it. To place the image next to the score, add an empty span to the player template:
<template name="player">
<div class="player {{selected}}">
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
<span class="icon"></span>
</div>
</template>
2) You need to add a size to the span as well as to the background image. In your css, style the span for your image separately:
.icon{
background-image: url('test.png');
background-size: 40px 40px;
background-repeat:no-repeat;
width: 40px;
height: 40px;
display: inline-block;
}
For an image placed at the root of the public directory, the above results in this:
I had similar problem in my meteor "leaderboard" project with background image(local file) for page body.
The solution was to create a folder with name "public" inside my project and to put background image into it. This way background will become reachable by meteor http://localhost:3000/bg.jpg
After that I was able to use it in my CSS code as usual:
body {
background: url(bg.jpg) no-repeat fixed;
}
Don't forget the height value:
height: 30px;
When you use a background image in CSS the image doesn't consume space. You have to explitly tell the div how big it should be. Especially when there is nothing in it. However big you want it use that as the height, I've just put up 30px.
Update: I've double checked this is working: here is a screenshot:
Related
Good morning. I am currently working on a final project for my Unix class and it trying to implement some of the stuff learnt through building a web game. One feature that I want to incorporate is the ability to add text over a div as shown in the picture. How would I go about that?
Try including some of your own source code next time, just so we get an idea of what you're having issues with.
But to put text over, try using position: relative, inside a div with a background image of what you want.
Eg.
.parent {
background-image:url("https://picsum.photos/200/300");
width: 800px;
height: 800px;
}
.text {
position: relative;
top: 20px;
left: 40px; /*edit top, left, right, and bottom to change position*/
font-weight: bold;
}
<body>
<div class="parent">
<p class="text">TEXT!</p>
</div>
</body>
If you can't use a background image, try using absolute positioning.
Here's a great tutorial for that: https://www.youtube.com/watch?v=P6UgYq3J3Qs
When I open the HTML file the background img is centered but after uploading the files to Wordpress the background is centered to the right of the screen. I'm at a lost for what the problem could be.
here's the code
body {
line-height: 1;
background:url(images/shopbg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 80%;
background-position: center center;
background-color: black;
Your styling is applied to the <body> tag and when you are uploading your file you probably have other css files with classes on the <body>. You could create a specific class for your element and apply the styling there.
try create div and put the image and add a class to manage the image, or you need to see the image type background???
I've noticed that google's image source files for their pages may contain lots of images in one source, but then only one will be displayed in a specific position.
for example, this: "https://www.google.co.uk/images/nav_logo242.png"
is one image source file for google's results page but then they will somehow choose a specific part of this source to display in a part of their webpage.
I would like to replicate this somehow but don't know how this is accomplished?
I only know how to use an image source when you use one image at a time and display all of it.
Thanks in advance to anyone who can help me!
These are known as CSS sprites.
These are called sprites, you can check out this link to find out how to use them: http://www.w3schools.com/css/css_image_sprites.asp
These are CSS-Sprites.
Basic detail on CSS-Sprite, Here 1 image will consists many images.
On using sprites unnecessary bandwidth use will be reduced.
To access individual images background-position CSS property plays main role.
That type of image is called a sprite. You would put the image as a background of an element and then use css to position that background to show only what you want to see.
Here's an example of how to use it. In the first example I am using a div. In the second example I am using a pseudo element to place it in a larger element so there will be no bleed of other parts of the image.
.google, .camera::before {
background: transparent url(https://www.google.co.uk/images/nav_logo242.png) left top no-repeat;
}
.google {
width: 120px;
height: 40px;
background-position: -22px 2px;
border: 1px solid red;
}
.camera {
position: relative;
padding-left: 30px;
font-size: 1.5rem;
}
.camera::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 20px;
height: 20px;
background-position: -40px -131px;
}
.camera:hover::before {
background-position: -60px -131px;
}
<div class="google"></div>
<p class="camera">
Hover over me.
</p>
I need to have an H1 tag centered between two graphics on the left and right of the text. The H1 text will be various widths depending on what page you are on. The dot on the left should stay on the left edge of the site and the line should extend until it reaches the edge of the text. Same for the right side. Is there a way to accomplish this by using CSS or even some jquery/javascript?
In the attached graphic, if the text was just "WHO YOU ARE" I'd need the bars on the left and right to grow wider to bump up against the edges of the text.
The background is a texture (hard to see in the example image) so using a solid color behind the text is not an option. :(
try this: http://jsfiddle.net/NpCP5/
Instead of using two graphics we use one here that extends behind the h1 and set a background colour of the h1 (for the gapped effect). This could be achieved dynamically also with a minimum space either side for the line also using only css.
This can all be done with simple html and css. It uses the image you posted for background for the 2 sides and the main h1 itself. The text in image can't be removed with css , a more appropriate image is needed.
Try the following in a page in your browser. jsfiddle.net seems to block access to the image coming from this site
Use your browser console to inspect each element css and ake adjustments as necessary. The main framework is there, you just need to adjust to your liking
HTML
<h1>
<span class="h1_left"> </span>
<span class="h1_text">H1 Title Text</span>
<span class="h1_right"> </span>
</h1>
CSS
h1 {
text-align:center;
color:#FC3;
background-image:url(http://i.stack.imgur.com/meq5P.png);
background-position:left 0;
max-width: 700px;
min-width:360px;
padding:0;
height:40px;
}
.h1_left,
.h1_right {
display: inline-block;
width:40px;
height:100%;
background-image:url(http://i.stack.imgur.com/meq5P.png);
overflow:hidden;
}
.h1_text {
background-color: #000;
display: inline-block;
height: 100%;
padding: 0 10px;
font-size:20px;
line-height:40px;
}
.h1_right {
float:right;
background-position: 100% 0;
}
.h1_left{ float:left}
So I'm using CSS :hover to replace a submit button background. When I mouse over the button the old background image disappears (so it looks like nothing is there) for a moment and then reappears with the new background. I thought that perhaps the button image file size was too large but its only 1.4kb. Is there a way to prevent this, caching or pre-loading, or something along those lines?
Is this only on the initial page display / hover?
This will be because the image file is only loaded on request - i.e. the hover action.
To avoid this, both button states should be stored in a single file. You then just need to adjust the background-position property to display the correct half of the image for it's current state.
Here's a rough example (note that button.png contains both image states and is 40 pixels high):
button {
background-image: url(button.png);
width: 60px;
height: 20px;
background-position: 0 0;
}
button:hover {
background-position: 0 -20px;
}
You could, maybe, use a technique that's similar in intent, albeit not execution, to Bryn's answer, above.
.button {background-image: url(img/for/hover-state.png)
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
height: 1.5em;
width: 5em;
}
.button span
{background-image: url(img/for/non-hover-state.png);
background-position: top left;
background-repeat: repeat-x;
background-color: #000;
height: 1.5em;
width: 5em;
}
.button:hover span
{background-color: transparent;
background-image: none;
}
The similarity I mentioned is to have both images present on the document in order to avoid the hover-flicker. On hover of the button the background-image of the span will disappear, and reveal the hover state, rather than having to load it on-demand.
The bonus is that, although I specified the height/width above this technique will work for dynamic re-sizing, not relying on fixed-width sizes of images (or it's as fluid as your design can allow it to be).
It's because it takes time for the "hover" image to download before it displays. To prevent this, you can use a sprite image technique.
Example: Using Sprite Images with INPUT for a Hover Effect