I just want the png to overlap my already built (bootstrap) header, so basically ignore it.
could I modify app/views/home/index.html.erb so that the png just sits independently of what the css does?
You can use css to position the png where you want it. In your custom stylesheet, try something like:
img#id-of-image {
position: absolute:
top: 5px;
left: 5px;
}
You can play with the top and left values to position it where you want.
If you need to nest it inside something, you need to put it within a container (ie. a div) and set the position of that container to "position: relative;". Then the top/left will be relative to the inside top corner of the container.
Related
I'm trying to create a slideshow using rstudio's implementation of quarto, and I'd like to have a common icon in the top left of all non-title-slides in the show. (I'd also like it to be on the title slide, but that I've got figured out!)
On a single slide, I can use {background-image="logo.png" background-size=15% background-position="0% 0%"} and that works fine for that slide.
In the YAML,
data-background-image: ./logo.png
data-background-size: 15%
data-background-position: 0% 0%
does perfectly for the title slide. If I use
background-image: logo.png
background-size: 15%
background-position: 0% 0%
I get the right image on all slides, but it's taking up the entire slide, not respecting the size argument.
Any suggestions on how to handle this? Maybe the background isn't actually the right way to do this since it's just a logo, but this seemed like it might be easier than trying to change the properties of the "logo" in quarto, since I don't see any options to change the size of that either.
Update: I have written a quarto filter extension reveal-header to add a header logo in top-left corner of all slides with header-logo option in yaml, which is probably an easier option than the approach described below.
Old Answer
If you want to add a logo for all slides (including the title slide) you can do this more easily by adding a logo via logo YAML key and tweaking the CSS property for that logo image.
---
title: "Untitled"
format:
revealjs:
slide-number: true
logo: placeholder.png
css: logo.css
---
## Quarto
Quarto enables you to weave together content and executable code into a
finished presentation. To learn more about Quarto presentations see
<https://quarto.org/docs/presentations/>.
logo.css
.reveal .slide-logo {
display: block;
position: fixed;
bottom: unset !important;
right: unset !important;
top: 5px;
left: 12px;
height: 100px !important;
width: 100x !important;
max-width: unset !important;
max-height: unset !important;
}
change the height and width css property as you need.
I'm new in using bootstrap 3. I need your help on how to make images responsive while using position absolute, top and left? My images are on top of one image and whenever I re-size the browser the images will not be in their place anymore(desktop size).
from http://www.w3schools.com/cssref/pr_class_position.asp
so something like this: (in one of the relevant .css files)
img.topleftStuck {
position: absolute;
left: 100px;
top: 150px;
}
then something like this:
<img src='path/to/crappy_image.gif' class=topleftStuck>
this can also be achieved with div in similar fashion.. :)
What I want to do is to have a form where you can upload a picture, then when you view that object, the picture cones up centered, vertically and horizontally in a specific div. The size of it is unknown, etc.
Unless there is a way to center it vertically with the image_tag helper, I like to be able to use the image as a background image. In my .css.scss file, I want to be able to do something like
.image_div {
background-image: image_url("#{#object.image}");
background-position: center
}
Im using CarrierWave to upload the pictures, and when I output #object.image it gives the path on my computer to the image (so I don't know if in production that would be considered the path or url). Any ideas?
It's possible to use erb in a sass file, but it's a really, really bad idea, as your css will have to be parsed on each request (and the browser will be unable to cache it).
I'd recommend just sticking that one snippet of css directly on the view page in a style tag. That way it gets evaluated with the page. Make sense?
UPDATE (adding requested example)
Add this to your actual view (ex. show.html.erb):
<style media="screen">
.image_div { background-image: url(<%= #object.image %>); }
</style>
You can leave the background-position declaration in the css file since it's not dynamic. #object.image needs to return the actual path to the image, so if #object.image is a ruby object, you'll need to access whatever property stores the path (#object.image.path or #object.image.url or whatever fits your codebase).
I want to set this style for an SVG <path>:
background-color: red;
background-image: url('myImage.png');
This picture has transparent pixels and I need background color to fill it.
What you would do in SVG is to define a <pattern> that contains a rect with the color you want and the image you want, and then use that as fill for the <path>.
See this example from the SVG testsuite.
'background-image' and 'background-color' don't apply to svg content unless it's handled by the CSS box model (so basically just the root svg element).
I'm reasonably sure you cannot have an image with a background colour in one path.
You can however replicate the effect by having two paths in the same position, with the image path on top of the solid colour path.
I am trying to use sprite images
I have a very basic link
<td align="center">
<img alt="my alt text" src="/Assets/t/myImage.gif" />
</td>
I am struggling for a while, tying to change this and making it use an image in my sprite instead of the src
sprites are large images containing more than one graphic, which are used in CSS as background-image. They are placed as background on block elements which are also sized with CSS using Width and Height. Then, using background-position, the background image is placed where it should be. The image is cropped according to those coordinates and element size, and the rest is ignored (used for other element backgrounds).
For example you have pretty buttons, which have a normal state, a mouse hover state, and an active state (pressed). Just place all 3 images one below the other, in one single image file.
button {display: block; width: 100px; height: 50px; background-image: url(yourImage.png); background-repeat: no-repeat; background-position: 0 0;}
button:HOVER {background-position: 0 -50px;}
button.active {background-position: 0 -100px;}
This will also eliminate the situation when new background image has to be loaded when the state is changed, meanwhile leaving an ugly button for half a second.
Here's an simple example of using sprite images.
The basic idea is to use background image on a fixed sized element (in the example it's an a tag with width/height 20px). Then positioning the image using background-position to select the sprite you need. The :hover selector is used to pick yet another sprite when moused over. Normally you'd have multiple links all using a different sprite from the one image.
css:
a.sprite_button
{
background-image:url(toolbar.png);
width:20px;
height:20px;
display:inline-block;
}
a#button1 { background-position:0px 0px; }
a#button1:hover { background-position:0px 20px; }
html: